React Native 动画

17 Mar 2025 | 4 分钟阅读

React Native 动画在应用程序中提供额外的效果和良好的用户体验。动画在界面中传递物理上可信的运动。

React Native 中有两种互补的动画系统。它们是

Animated： Animated API 用于交互式控制特定值。它侧重于输入和输出之间的声明性关系。它具有 start 和 stop 方法来控制基于时间的动画执行。

Animated 导出四个不同的动画组件，分别是 View、Text、Image 和 ScrollView。 我们也可以使用 Animated.createAnimatedComponent() 创建我们自己的动画组件。

LayoutAnimated： LayoutAnimated 用于动画全局布局事务。

动画方法

方法	描述
Animated.timing()	它使用各种缓动曲线或通过使用自己的函数来随着时间的推移对值进行动画处理。
Animated.event()	它将事件直接映射到动画值。
Animated.spring()	它对值进行动画处理。它跟踪状态的速度以创建流畅的运动，因为 toValue 会更新。
Animated.decay()	它以初始速度启动动画，然后逐渐减慢直至停止。

React Native 动画示例 1 (Animated.timing())

在此示例中，我们将使用 Animated.timing() 在图像上创建旋转动画。

App.js

import React, { Component } from 'react';
import {StyleSheet, AppRegistry,Text, View,Animated,Easing} from 'react-native';

export default class DisplayAnImage extends Component {
    constructor () {
        super()
        this.spinValue = new Animated.Value(0)//declare spinValue as a new Animated.Value and pass 0 (zero) in it.
    }
    componentDidMount () {
        this.spin()
    }
    //create a spin method and call it from componentDidMount
    spin () {
        this.spinValue.setValue(0) //set spinValue to 0 (zero)
        Animated.timing(    //calling Animated.timing() method, it takes two arguments:
            this.spinValue, // value
            {           // and config object
                toValue: 1, //and setting spinValue to 1
                duration: 4000, //within 4000 milliseconds
                easing: Easing.linear
            }
        ).start(() => this.spin())
    }
    render () {
        const spin = this.spinValue.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
        })
        return (
            <View style={styles.container}>
                <Animated.Image
                    style={{
                        width: 227,
                        height: 200,
                        transform: [{rotate: spin}] }}
                    source={require('MyReactNativeApp/img/react-logo.png')}
                />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})
// skip this line if you are using Create React Native App

AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);

interpolate() 方法调用任何 Animated.Value。它在更新属性之前对值进行插值。在上面的示例中，我们将 0（零）度映射到 360 度。

我们传递一个 inputRange [0,1] 并获得 outputRange['0deg', '360deg'] 数组。

输出

React Native 动画示例 2 (Animated.timing())

在此示例中，我们声明一个单一的动画值 this.aninatedValue 并将其与插值一起使用以创建多个动画，例如：marginLeft、opacity、fontSize 和 rotate。我们将插入这些属性以进行样式设置，例如不透明度、边距、文本大小和旋转属性。

App.js

import React, { Component } from 'react';
import {StyleSheet, AppRegistry,Text, View,Animated,Easing} from 'react-native';

export default class DisplayAnImage extends Component {
    constructor () {
        super()
        this.animatedValue = new Animated.Value(0)
    }
    componentDidMount () {
        this.animate()
    }//animate method is call from componentDidMount
    animate () {
        this.animatedValue.setValue(0)
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear
            }
        ).start(() => this.animate())
    }

    render() {
        const marginLeft = this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 300]
        })
        const opacity = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [0, 1, 0]
        })
        const movingMargin = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [0, 300, 0]
        })
        const textSize = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [18, 32, 18]
        })
        const rotateX = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: ['0deg', '180deg', '0deg']
        })


        return (
            <View style={styles.container}>
                <Animated.View //returns Animated.View
                    style={{
                        marginLeft,
                        height: 30,
                        width: 40,
                        backgroundColor: 'red'}} />
                <Animated.View
                    style={{
                        opacity,
                        marginTop: 10,
                        height: 30,
                        width: 40,
                        backgroundColor: 'blue'}} />
                <Animated.View
                    style={{
                        marginLeft: movingMargin,
                        marginTop: 10,
                        height: 30,
                        width: 40,
                        backgroundColor: 'orange'}} />
                <Animated.Text // returns Animated.Text
                    style={{
                        fontSize: textSize,
                        marginTop: 10,
                        color: 'green'}} >
                    Animated Text!
                </Animated.Text>
                <Animated.View 
                    style={{
                        transform: [{rotateX}],
                        marginTop: 50,
                        height: 30,
                        width: 40,
                        backgroundColor: 'black'}}>
                    <Text style={{color: 'white'}}>Hello from TransformX</Text>
                </Animated.View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 150
    }
}) 
// skip this line if you are using Create React Native App
AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);

输出

LayoutAnimation API

LayoutAnimation 允许全局配置、创建和更新动画。这将用于下一个渲染/布局周期中的所有视图。

LayoutAnimation 非常有用，但它对动画的控制远不如 Animated 和其他动画库。

要在 Android 中使用此 API，我们需要通过 UIManager 设置以下标志

UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

React Native LayoutAnimation 示例

在此示例中，我们创建一个 TouchableOpacity 和一个 View 组件。按下 TouchableOpacity 组件会调用 _onPress() 方法，并通过将 View 的宽度和高度增加 15 个单位来动画 View 组件。

import React from 'react';
import {
    NativeModules,
    LayoutAnimation,
    Text,
    TouchableOpacity,
    StyleSheet,
    View,
} from 'react-native';

const { UIManager } = NativeModules;

UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);

export default class App extends React.Component {
    state = {
        w: 100,
        h: 100,
    };

    _onPress = () => {
        // Animate the update
        LayoutAnimation.spring();
        this.setState({w: this.state.w + 15, h: this.state.h + 15})
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.box, {width: this.state.w, height: this.state.h}]} />
                <TouchableOpacity onPress={this._onPress}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Press me!</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    box: {
        width: 200,
        height: 200,
        backgroundColor: 'blue',
    },
    button: {
        backgroundColor: 'green',
        paddingHorizontal: 20,
        paddingVertical: 15,
        marginTop: 15,
    },
    buttonText: {
        color: '#fff',
        fontWeight: 'bold',
    },
});

输出