React-Native中Animate动画使用方法汇总整理（十）之动画的3种停止方法之动画完结篇

React-Native中Animate动画使用方法汇总整理（十）之动画的3种停止方法之动画完结篇

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

本篇是RN动画组件使用方式整理的第10篇，也是最终篇了，之前的内容都是在对动画的播放进行梳理，本篇则重点总结动画的停止方式。先看代码

完整代码如下

//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_10 from './Ani_10';

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

//Ani_10.js
'use strict';

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

export default class Ani_10 extends React.Component {
    constructor() {
        super();
        this.state = {
            width: new Animated.Value(0),
        };
    }

    render() {
        console.log('Ani_10_render()');
        return (
            <SafeAreaView>
                <Button title={'StopAni'} onPress={this.stopAni} />
                <Button title={'StartAni'} onPress={this.startAni} />
                <Animated.View style={[{ width: this.state.width }, styles.Ani_1]} />
            </SafeAreaView>
        );
    }

    stopAni = () => {
        //方法1
        // Animated.timing(this.state.width).stop();
        //方法2
        // this.state.width.stopAnimation();
        //方法3
        // this.state.width.setValue(200);
    };

    startAni = () => {
        Animated.timing(this.state.width, {
            toValue: 300,
            duration: 2000,
            useNativeDriver: false,
        }).start(({ finished }) => {
            if (finished === true) {
                this.state.width.setValue(0);
            } else {
                this.state.width.setValue(100);
            }
        });
    };
}

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

在stopAni方法内，列举了我目前所了解到的3种停止动画播放的方法，这三种停止方式的效果展示如下

方法1:

方法2（实际效果和方法1一样）:

方法3:

需要关注的内容有如下几点：
1、播放动画的start方法可以设置回调函数，其中finished的意义是动画是否正常完整的播放完毕，该回调方法在动画停止时触发，若动画播放完毕则finished为true,若动画中间被打断，则为false，我们可以据此来书写动画终止之后的相关逻辑
2、通过观察上面的动图不难发现，方法1和方法2虽然在代码实现上有所不同，但是其最终效果是一样的
3、方法3实际上不能完全算作停止动画的方式，它只是将动画所维护的数值指向了一个确定的值，当该方法执行后，会中断当前动画，导致出现了上述停止的效果