最近在使用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>