由于项目中需要加入几个小动画，于是研究了一下React Native的Animations。因为之前没有接触过有关动画的开发，包括使用CSS3制作动画的经验也不是太多，所以在看到设计图之后其实没有把握该如何入手。不过，在看了官方的文档和几篇博客之后，也实现了效果，其实也挺简单的，理解几个API之后开发就轻松不少。
官方文档中，有关动画的API有两个，一个是Animated，另一个是LayoutAnimation。其中，他们的区别是，Animated需要维护变量来实现动画，而LayoutAnimation则不需要变量，但是LayoutAnimation对于动画何时发生的控制不是非常自由，它的动画发生在下一次页面更新的时候（the next layout）。结合项目的需要，我使用了Animated。
Animated提供了三种动画类型，分别是：
- Animated.decay()是速度逐渐衰减的效果。
- Animated.spring()提供一个物理弹簧效果。
- Animated.timing()提供一个基于时间，可以定制的效果。这个也是最常用到的。
那这些效果怎么用呢（下面以Animated.timing()为例）？
1. 在你的component内新建一个变量，比如this.animateValue
import React, {Animated} from 'react'
class AnimatedDemo extends React.Component {
construct(props) {
super(props)
// 新建变量并且把默认值设置为0
this.animatedValue = Animated.Value(0)
}
}
2. 编写你的组件
注意，Animated默认有四个用于动画的组件(分别是Animated.Image, Animated.ScrollView, Animated.Text, Animated.View)，当然，你也可以扩展自己的动画组件。
import React, {Animated} from 'react'
class AnimatedDemo extends React.Component {
construct(props) {
super(props)
// 新建变量并且把默认值设置为0
this.animatedValue = Animated.Value(0)
}
render() {
return (
<View style={}>
<Animated.View style={{height: this.animatedValue, width: this.animatedValue, backgroundColor: "#00FFFF"}}>
</Animated.View>
</View>
)
}
}
3. 让组件动起来
现在，一切准备就绪了。下面，我们可以写非常简单的一个基于Animated.timing()的动画。
import React, {Animated} from 'react'
class AnimatedDemo extends React.Component {
construct(props) {
super(props)
// 新建变量并且把默认值设置为0
this.animatedValue = Animated.Value(0)
}
componentDidMount() {
Animated.timing(
this.animatedValue,
{
toValue: 100,
duration:1000
}
).start();
}
render() {
return (
<View style={}>
<Animated.View style={{height: this.animatedValue, width: this.animatedValue, backgroundColor: "#00FFFF"}}>
</Animated.View>
</View>
)
}
}
这样，在component mount之后，动画就出现了。在Animated.timing()里面，你可以设置更多的参数来控制动画。
如果有多个动画需要完成，需要管理他们的开始时间等等，那么可以使用：
- Animated.delay()延迟开始
- Animated.parallel()同时发生
- Animated.sequence()动画一个接一个，当前一个完成，才进行下一个
- Animated.stagger()动画有序的同时发生，还可以加入延迟
