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轴正方向：从手机背面向屏幕指向为负，反之从屏幕向背面指向为正；
控制旋转中心：https://www.jianshu.com/p/c67559b8f691

四、内置动画

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

transitionConfig: StackViewStyleInterpolator.forVertical,

其枚举类型有

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