React-Native中Animate动画使用方法汇总整理（五）之利用sequence、parallel实现组合动画

React-Native中Animate动画使用方法汇总整理（五）之利用sequence、parallel实现组合动画

写作时间：2021/9/23
React-Native版本：0.63.2
目标平台：iOS（安卓平台尚未检测）

本篇是RN动画组件使用方式整理的第5篇，上篇主要整理了easing的诸多使用方法，但是这些变换方式是非组合性的，在实际的开发过程中，我们为了使动画效果变得更加丰富，通常希望动画能够提供组合效果，比如：在组件变宽的过程中高度降低，或者缩放的过程中改变透明度，或者组件的变换方式存在一定的先后顺序，这篇笔记利用sequence、parallel来解决这些问题，先看效果

通过上面的动图可以对sequence、parallel区别有一个大致的了解，sequence为顺次执行，parallel为同时执行

完整代码如下

//App.js
'use strict';

import React from 'react';
import AnimatedTest from './demos/demo_2/AnimatedTest';

export default class App extends React.Component {
    render() {
        return (
            <AnimatedTest />
        );
    }
}

//AnimatedTest.js
'use strict';

import React from 'react';
import { SafeAreaView } from 'react-native';
import Ani_5 from './Ani_5';

export default class AnimatedTest extends React.Component {
    render() {
        return (
            <SafeAreaView>
                <Ani_5 />
            </SafeAreaView>
        );
    }
}

//Ani_5.js
'use strict';

import React from 'react';
import {StyleSheet, SafeAreaView, Button, Animated, Text} from 'react-native';

export default class Ani_5 extends React.Component {
    constructor() {
        super();
        console.log('Ani_5_constructor()');
        this.state = {
            width_1: new Animated.Value(10),
            height_1: new Animated.Value(10),
            width_2: new Animated.Value(10),
            height_2: new Animated.Value(10),
        };
    }

    render() {
        console.log('Ani_5_render()');
        return (
            <SafeAreaView>
                <Button title={'Start'} onPress={this.startAni} />
                <Text>sequence</Text>
                <Animated.View
                    style={[
                        {
                            width: this.state.width_1,
                            height: this.state.height_1,
                        },
                        styles.Ani,
                    ]}
                />
                <Text>parallel</Text>
                <Animated.View
                    style={[
                        {
                            width: this.state.width_2,
                            height: this.state.height_2,
                        },
                        styles.Ani,
                    ]}
                />
            </SafeAreaView>
        );
    }

    startAni = () => {
        console.log('Ani_5_startAni()');
        Animated.sequence([
            Animated.timing(this.state.width_1, {
                toValue: 300,
                duration: 3000,
                useNativeDriver: false,
            }),
            Animated.timing(this.state.height_1, {
                toValue: 300,
                duration: 3000,
                useNativeDriver: false,
            }),
        ]).start();
        Animated.parallel([
            Animated.timing(this.state.width_2, {
                toValue: 300,
                duration: 3000,
                useNativeDriver: false,
            }),
            Animated.timing(this.state.height_2, {
                toValue: 300,
                duration: 3000,
                useNativeDriver: false,
            }),
        ]).start();
    };
}

const styles = StyleSheet.create({
    Ani: {
        backgroundColor: 'cyan',
    },
});

需要注意的是
1、sequence和parallel方法需要传递的参数为数组
2、动画组件需要绑定多个state中维护的变量

下篇会对缩放动画的实现进行整理