React Native动画总结
最近在使用react native进行App混合开发,相对于H5的开发,RN所提供的样式表较少,RN中不能使用类似于css3中的动画,因此,RN提供了Animated的API
1.写一个最简单的动画
import React, { Component } from 'react' import { Animated, Text, View } from 'react-native' Class DropList extends React.Component {
constructor(props) { suoer(props) this.state = { showMenu: false, transVal: new Animated.value(0) } this.switchMenu = this.switchMenu.bind(this) } // 菜单展开动画 stratAni() { Animated.timing( this.state.fadeAnim, { toValue: 50, duration: 500, useNativeDriver: true // <-- 加上这一行 是否启用原生动画 // 启用后,动画一开始就完全脱离了 JS 线程,因此此时即便 JS 线程被卡住,也不会影响到动画了 // 动画值在不同的驱动方式之间是不能兼容的。因此如果你在某个动画中启用了原生驱动,那么所有和此动画依赖相同动画值的其他动画也必须启用原生驱动 // 启用原生动画后,仅支持opacity和transform属性变化 } ).start() } // 菜单收起动画 closeAni() { Animated.timing( this.state.menuTransform, { toValue: 0, duration: 0, useNativeDriver: true } ).start() } // 菜单展开与折叠 switchMenu() { if (this.state.showMenu) { // 收起 this.setState({ showMenu: false }) this.closeAni() } else { // 折叠 this.setState({ showMenu: true }) this.stratAni() } }
render() {
let {
showMenu,
transVal
} = this.state
return(
<View>
<Text onPRess={this.switchMenu}>Switch Menu</Text>
<Animated.View style={{ height: 50, backgroundColor: 'red', position: 'absolute', top: -50, transform: [ translateY: transVal ] }}>
</Animated.View>
</View>
)
} }
2.插值动画(loading旋转动画)
this.state = {
aniVal: new Animated.Value(0)
}
this.aniVal = 0
componentDidMount() {
this.state.aniVal.setValue(0);
Animated.timing(this.state.aniVal, {
toValue: 1,
duration: 200
}).start();
}
<Animated.View
style={{
transform: [
{
translateY: this.state.aniVal.interpolate({
inputRange: [0, 1],
outputRange: [100, 0]
})
}
],
opacity:this.state.aniVal.interpolate({
inputRange: [0, 1],
outputRange: [0.2, 1]
})
}}>
<Text>加载中...</Text>
</Animated.View>