关注我们

React Native - 动画

React Native Animations动画在应用程序中提供了额外的效果和出色的用户体验。

React Native中有两种类型的互补动画系统。这些都是:

Animated - 动画API用于交互控制特定值。它具有一个start和stop方法来控制基于时间的动画执行。
LayoutAnimated - LayoutAnimated用于设置全局布局事务的动画。

动画方法

Methods	Description
Animated.timing()	它使用各种缓动曲线或使用自己的函数对值随时间进行动画处理。
Animated.event()	它将事件直接映射到动画值。
Animated.spring()	对值进行动画处理，以跟踪状态速度以随着toValue更新而创建流体运动。
Animated.decay()	它以初始速度开始动画，然后逐渐变慢以停止。

动画示例1

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)//将 spinValue 声明为新的 Animated.Value 并在其中传递 0（零）。
    }
    componentDidMount () {
        this.spin()
    }
    //创建一个 spin 方法并从 componentDidMount 调用它
    spin () {
        this.spinValue.setValue(0) //将 spinValue 设置为 0（零）
        Animated.timing(    //调用 Animated.timing() 方法，它需要两个参数：
            this.spinValue,//value 值
            {          //和配置对象
                toValue: 1, //并将 spinValue 设置为 1
                duration: 4000, //4000 毫秒内
                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'
    }
})
//如果您使用 Create React Native App，请跳过此行

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

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

我们通过一个inputRange [0，1]，并获得outputRange [ '0deg'， '360deg']数组。

输出:

动画示例2

在此示例中，我们声明一个动画值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 方法是从 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 //返回 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
    }
}) 
// 如果您使用 Create React Native App，请跳过此行
AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);

输出:

LayoutAnimation API

LayoutAnimation允许全局配置，创建和更新动画。这将用于下一个渲染(render)/布局(layout)循环中的所有视图。

LayoutAnimation非常有用，它的控制比Animated和其他动画库要少得多。

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

复制代码

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

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 = () => {
       //动画更新
        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',
    },
});