本人使用RN比较晚,错误之处也请大牛指出来。
在公司新项目里面加了一点点动画,就是官方是animated和LayoutAnimation ,今天主要就是说animated精确动画,其余的布局动画如LayoutAnimation 我也没有看,关于手势部分也跳过了,希望帮到需要的人。
使用一个动画首先要知道在哪里需要动画,那个位置是动画的效果。例如,他的left改变,opacity改变,color变化,或者是一个rotate变化等等。
第一步:创建一个动画
初始值并给出一个默认透明度
constructor(props){
super(props)
this.state={
opacity: new Animated.Value(1),
}
}
第二步:以什么方式调用这个效果
在componentdidmount调用timing
componentDidMount(){
Animated.timing(this.state.opacity, {
toValue: 1,
duration:1000,
}).start();
第三步:指定到标签上
谁得什么属性变化
<Animated.View style={{opacity:this.state.opacity}}></Animated.View>
ok!以上就是一个简单timing的动画,除了timing 还有spring以及decay,区别就是动画展现方式不同,timing:根据时间函数来处理,一般属性 toValue: , duration:,easing。spring:弹性动画,一般属性toValue: , friction: ,tension: 。decay:衰减动画,velocity: , deceleration: ,。三个函数不一样,属性不同。
如果这些不够满足使用情况下,怎么办?例如想改变backgroundcolor,默认的 Animated.Value(1),需要输一个数值,但是颜色(#f00)并不是数值,这时就可以使用interpolate(插值)来解决。
例如从#f00变成#0f0,
先初始化bg,
constructor(props){
super(props)
this.state={
bg:new Animated.Value(0),
}
}
在编写调用一个函数
Animated.spring(this.state.bg, {
toValue: 1,friction:2,tensions:30,
}).start();
最后指定标签并interpolate一下
<Animated.View style={{backgroundColor:this.state.bg.interpolate({
inputRange:[0,1],outputRange:['#f00','#0f0']})
}}>
</Animated.View>
ok! 颜色就会改变了,一个颜色的变化就会出现了。
如果这些还是不够满足使用情况下,怎么办?你可以使用transform来编写动画,
transform:[{skewX:this.state.skewx.interpolate({inputRange: [0, 1],outputRange: ['90deg', '9deg']})}]
注意;作为一个坑,可以自己试试skewX和skewY,skewX没效果,而skewY可以使用。