React-Native中Animate动画使用方法汇总整理（七）之循环播放的实现

React-Native中Animate动画使用方法汇总整理（七）之循环播放的实现

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

本篇是RN动画组件使用方式整理的第7篇，重点对循环播放的实现进行整理介绍，没什么说的，先看效果吧

核心就是调用了Animated.loop

完整代码如下

//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_7 from './Ani_7';

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

//Ani_7.js
'use strict';

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

export default class Ani_7 extends React.Component {
    constructor() {
        super();
        this.state = {
            width: new Animated.Value(100),
            height: new Animated.Value(300),
        };
    }

    render() {
        return (
            <SafeAreaView>
                <Button title={'Start'} onPress={this.startAni} />
                <Animated.View style={[{width: this.state.width, height: this.state.height}, styles.ani]} />
                <View style={styles.view} />
            </SafeAreaView>
        );
    }

    startAni = () => {
        Animated.loop(
            Animated.sequence([
                Animated.parallel([
                    Animated.timing(this.state.width, {
                        toValue: 300,
                        duration: 2000,
                        useNativeDriver: false,
                    }),
                    Animated.timing(this.state.height, {
                        toValue: 100,
                        duration: 2000,
                        useNativeDriver: false,
                    }),
                ]),
                Animated.parallel([
                    Animated.timing(this.state.width, {
                        toValue: 100,
                        duration: 2000,
                        useNativeDriver: false,
                    }),
                    Animated.timing(this.state.height, {
                        toValue: 300,
                        duration: 2000,
                        useNativeDriver: false,
                    }),
                ]),
            ]),
        ).start();
    };
}

const styles = StyleSheet.create({
    view: {
        width: 300,
        height: 100,
        backgroundColor: 'orange',
    },
    ani: {
        backgroundColor: 'cyan',
    },
});

代码看起来像是在套娃，但是实际上并没有什么需要注意的地方，只要格式不出现问题即可

下篇会对动画的旋转实现方法进行整理