React-Native中Animate动画使用方法汇总整理（八）之旋转动画的实现

React-Native中Animate动画使用方法汇总整理（八）之旋转动画的实现

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

本篇是RN动画组件使用方式整理的第8篇，重点对旋转动画的实现进行整理介绍，先看效果

可以看到上面的动图展示了两个旋转效果，其中第一个是比较简单的平面旋转，第二个似乎有种立体的感觉

完整代码如下

//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_8 from './Ani_8';

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

//Ani_8.js
'use strict';

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

export default class Ani_8 extends React.Component {
    constructor() {
        super();

        this.state = {
            deg: new Animated.Value(0),
        };
    }

    render() {
        let deg = this.state.deg.interpolate({
            inputRange: [0, 360],
            outputRange: ['0deg', '360deg'],
        });
        return (
            <SafeAreaView>
                <Button title={'Start'} onPress={this.startAni} />
                <View style={styles.wrapper}>
                    <Animated.View style={[{ transform: [{ rotate: deg }] }, styles.ani]} />
                    <Animated.View
                        style={[
                            {
                                transform: [{ rotateX: deg }, { rotateY: deg }, { rotateZ: deg }],
                            },
                            styles.ani,
                        ]}
                    />
                </View>
            </SafeAreaView>
        );
    }

    startAni = () => {
        Animated.loop(
            Animated.timing(this.state.deg, {
                toValue: 360,
                duration: 1000,
                easing: Easing.linear,
                useNativeDriver: true,
            }),
        ).start();
    };
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        marginTop: 300,
        justifyContent: 'center',
        alignItems: 'center',
    },
    ani: {
        margin: 20,
        height: 100,
        width: 100,
        backgroundColor: 'cyan',
    },
});

旋转动画的实现必须解决一个问题，那就是数值和字符串的对应关系问题，在这个案例中，动画所维护的动态变量deg是一个数值（我们暂且认为它是数值），但是组件旋转所需要的样式是一个字符串，例如’0deg’、'360deg’等等，这中间就需要有个方法来提供一一对应的转化关系，这个方法就是interpolate，它的具体用法已经在代码中体现，后续文章会对颜色变换进行整理，其原理与此完全相同

另外需要注意的一个细节是，如果只是想让组件在平面内旋转，只需要动态改变rotate即可，但是如果希望组件可以绕某个轴线进行旋转，就像动图里面展示的第二个旋转效果那样，就需要明确指出轴线是什么，例如rotateX，rotateY，rotateZ这样

下篇会对动画的颜色变换实现方法进行整理