React-Native中Animate动画使用方法汇总整理（一）之简单动画的实现

React-Native中Animate动画使用方法汇总整理（一）之简单动画的实现

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

RN中动画的使用是比较频繁的，好的动画也能给页面展示带来很好的增益效果，之前关于动画的使用写过一篇笔记，但是很片面也不完善，这次打算做一个整理汇总，把动画组件里涉及的使用方法进行一个总结，以笔记合集的形式输出，本篇主要关注动画的基本实现，先看效果吧

实现上面的简单动画只需要保证代码中包含以下3个要素即可

1、state中维护动画执行所依赖的变量
2、添加动画组件，将需要动态变化的量与state中维护的变量绑定
3、制定动画执行的逻辑，实际上是对state中变量的变化方式进行编辑

如下图所示，其中关键位置已给出标记

完整代码如下

//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_1 from './Ani_1';

export default class AnimatedTest extends React.Component {
    render() {
        return (
            <SafeAreaView>
                {/* 基础动画实现 */}
                <Ani_1 />
            </SafeAreaView>
        );
    }
}

//Ani_1.js
'use strict';

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

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

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

    startAni = () => {
        Animated.timing(this.state.width, {
            toValue: 300,
            duration: 5000,
            useNativeDriver: false,
        }).start();
    };
}

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