React Native Animations动画在应用程序中提供了额外的效果和出色的用户体验。
React Native中有两种类型的互补动画系统。这些都是:
Methods | Description |
---|---|
Animated.timing() | 它使用各种缓动曲线或使用自己的函数对值随时间进行动画处理。 |
Animated.event() | 它将事件直接映射到动画值。 |
Animated.spring() | 对值进行动画处理,以跟踪状态速度以随着toValue更新而创建流体运动。 |
Animated.decay() | 它以初始速度开始动画,然后逐渐变慢以停止。 |
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']数组。
输出:
在此示例中,我们声明一个动画值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允许全局配置,创建和更新动画。这将用于下一个渲染(render)/布局(layout)循环中的所有视图。
LayoutAnimation非常有用,它的控制比Animated和其他动画库要少得多。
要在Android中使用此API,我们需要通过UIManager设置以下标志:
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
在此示例中,我们创建一个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', }, });
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)