react-native转场动画,让你的APP瞬间绚丽起来

一、前言

关于react-native的转场动画这里要依赖于路由库"react-navigation":"3.6.1"，可以实现包括向上转场、向下转场、向左转场、向右转场、缩放、alpha值变化、旋转等多种动画。

二、实现方式

以向左转场为例，我们需要在项目路由下 -> createStackNavigator -> transitionConfig 配置参数如下

transitionConfig: (sceneProps) => ({
                        transitionSpec: {
                            duration: 3000,
                            // easing: Easing.out(Easing.poly(1)),
                            easing: Easing.bounce,
                            timing: Animated.timing,
                        },
                        screenInterpolator: sceneProps => {
                            const {layout, position, scene} = sceneProps;
                            const {index} = scene;
                            console.log('zhanglei-index:' + index);
                            const height = layout.initHeight;
                            //沿X轴平移
                            const translateX = position.interpolate({
                                inputRange: [index - 1, index, index + 1],
                                outputRange: [height, 0, 0],
                            });
                            //沿Y轴平移
                            const translateY = position.interpolate({
                                inputRange: [index - 1, index, index + 1],
                                outputRange: [height, 0, 0],
                            });
                            //透明度
                            const opacity = position.interpolate({
                                inputRange: [0, 0.5, 0.9, 1],
                                outputRange: [1, 0.25, 0.7, 1],
                                // inputRange: [index - 1, index - 0.99, index],
                                // outputRange: [0, 1, 1],
                            });
                            const rotateX = position.interpolate({
                                inputRange: [0, 0.5, 1],
                                outputRange: ['0deg', '90deg', '0deg']
                            });
                            const scaleX = position.interpolate({
                                inputRange: [0, 0.5],
                                outputRange: [0.8, 1.2],
                            });
                            return {
                                // opacity,
                                transform: [
                                    {translateX},
                                    // {translateY},
                                    // {rotateY: rotateX},
                                    // {scale: scaleX},
                                ]
                            };
                        },
                    }),

实现效果在这里插入图片描述其他的方式可以通过代码中几种动画的组合来实现，这里由于时间关系就只做个简记，以后再补充。另外我们也可以通过原生路由处理，将页面的转场动画回归到原生开发。

三、transform样式的使用详解

可以很明显的看到，这里的动画是主要是由alpha值与transform样式控制的。transform主要可以用于实现平移、缩放、旋转、倾斜等图形变换。

3.1、平移

translateX：沿 x 轴方向平移 translateY：沿 y 轴方向平移

3.2、缩放

scaleX：沿 x 轴方向放大 scaleY：沿 y 轴方向放大 scale：沿 x、y 轴方向都放大

3.3、旋转

rotateX：沿 x 轴旋转 rotateY：沿 y 轴旋转 rotateZ：沿 z 轴旋转 rotate：不指定轴旋转

3.4、倾斜（或者叫做斜切）

skewX：沿 x 轴方向倾斜 skewY：沿 y 轴方向倾斜

3.5、react-native坐标轴方向

xyz轴的方向为（手机屏幕面向上，平方在手机上）： X轴正方向：手机右侧为正，向左为负； Y轴正方向：手机下方为正，上方为负； Z轴正方向：从手机背面向屏幕指向为负，反之从屏幕向背面指向为正；控制旋转中心：www.jianshu.com/p/c67559b8f…

四、内置动画

另外，react-native内置了几种简单的转场动画，我们可以简单的处理成

transitionConfig: StackViewStyleInterpolator.forVertical,

其枚举类型有

import StackViewStyleInterpolator from "react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator";
export default {
  forHorizontal,
  forVertical,
  forFadeFromBottomAndroid,
  forFadeToBottomAndroid,
  forFade,
  forNoAnimation
};