One, foreword

The react-Native transition animation is dependent on the route library “React-Navigation “:”3.6.1”, which includes up, down, left, right, zoom, alpha change, rotation, etc.

Second, the way of implementation

For example, we need to set the following parameters under the project route -> 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;
                            // Translate along the X-axis
                            const translateX = position.interpolate({
                                inputRange: [index - 1, index, index + 1].outputRange: [height, 0.0]});// Translate along the Y-axis
                            const translateY = position.interpolate({
                                inputRange: [index - 1, index, index + 1].outputRange: [height, 0.0]});/ / transparency
                            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-0.99],
                                // 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},]}; }}),Copy the code

Implementation effectOther ways can be achieved by a combination of several animations in the code, which will be abbreviated for the sake of time and will be added later. In addition, we can also use native routing processing, the page transition animation back to native development.

Three, the use of transform style detailed explanation

As you can see, the animation here is largely controlled by the alpha and transform styles. Transform can be used to translate, scale, rotate, tilt and other graphic transformations.

3.1, translation

TranslateX: translates along the X-axis. TranslateY: translates along the Y-axis

3.2, scaling

ScaleX: Zoom in along the X-axis scaleY: Zoom in along the Y-axis Scale: Zoom in along both the X-axis and Y-axis

3.3, rotation,

RotateX: rotates along the X-axis. RotateY: rotates along the Y-axis. RotateZ: rotates along the Z-axis

3.4. Skew (or bevel)

SkewX: skews along the X-axis skewY: skews along the Y-axis

3.5 react-native coordinate axis direction

Direction of axis XYZ is (mobile phone screen facing up, square on the mobile phone) : positive direction of axis X: the right side of the mobile phone is positive, and the left side is negative; Positive Y axis direction: the bottom of the phone is positive, the top is negative; Positive direction of z-axis: negative direction from the back of the phone to the screen, and positive direction from the screen to the back; Control center of rotation: www.jianshu.com/p/c67559b8f…

Four, built-in animation

In addition, React-Native has several simple transitions built in, which we can easily process into

transitionConfig: StackViewStyleInterpolator.forVertical,
Copy the code

Its enumerated types are

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