React-Native中Animate动画使用方法汇总整理（二）之useNativeDriver的优化及适用范围

React-Native中Animate动画使用方法汇总整理（二）之useNativeDriver的优化及适用范围

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

本篇是RN动画组件使用方式整理的第二篇，上一篇通过一个简单的案例实现了动画的展示，本篇的案例仍然非常简单，但重点在于记录useNativeDriver参数的使用范围，先看效果吧

实现上面动画的关键就是对opacity进行正确的控制，这里使用了useNativeDriver来对动画进行优化，关于useNativeDriver，官方的解释如下：

使用原生动画，我们会在开始动画之前将所有关于动画的内容发送到原生代码，从而使用原生代码在 UI 线程上执行动画，而不是通过对每一帧的桥接去执行动画。

一旦动画开始，JS 线程就可以在不影响动画效果的情况下阻塞（去执行其他任务）掉了。

您可以通过在动画配置中指定useNativeDriver：true 来使用原生动画驱动。你可以在动画文档中看到更详细的解释。

代码上useNativeDriver具体的用法如下图所示

在使用useNativeDriver的时候需要注意，并不是所有的情况都可以利用useNativeDriver进行优化，它的适用范围如下：

Not everything you can do with Animated is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like transform and opacity will work, but flexbox and position properties will not.

大致的意思是transform和opacity可以通过useNativeDriver进行优化，但是组件的宽度，高度，以及位置相关的变量是无法利用该参数实现优化的。其中transform包括组件的旋转平移缩放，opacity为不透明度

完整代码如下

//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_2 from './Ani_2';

export default class AnimatedTest extends React.Component {
    render() {
        return (
            <SafeAreaView>
                {/* useNativeDriver的使用范围 */}
                <Ani_2 />
            </SafeAreaView>
        );
    }
}

//Ani_2.js
'use strict';

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

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

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

    startAni = () => {
        Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 3000,
            useNativeDriver: true,
        }).start();
    };
}

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

下一篇会对3种动画的配置方式（播放方式）进行整理