博主这个系列的文章
另外,我在Github上建立了一个仓库来搜集优秀的React Native库和优秀的博客等
资料
- 官方关于动画的介绍
- 官方给出的复杂动画的示例
- 开源项目react-native-animatable
- React Native Animation Book
- 可以用在实际项目里的:react-motion
概述
目前,React Native的版本是0.28,主要的动画分为两大类
- LayoutAnimation 用来实现布局切换的动画
- Animated 更加精确的交互式的动画
目前React native的release速度还是比较快的,每隔2周左右就release一次。
准备工作
本文默认读者已经
- 安装好了React Native
- 安装好了IDE(本文使用Atom+Nuclide),如果没有安装过,可以参照最上面的链接进行安装
- 使用
react-native init Demo --verbose
初始化了一个Demo项目
一个简单的动画
一个最基本的Animated创建过程如下
- 创建
Animated.Value
,设置初始值,比如一个视图的opacity
属性,最开始设置Animated.Value(0)
,来表示动画的开始时候,视图是全透明的。 - AnimatedValue绑定到Style的可动画属性,比如透明度,{opacity: this.state.fadeAnim}
- 使用
Animated.timing
来创建自动的动画,或者使用Animated.event
来根据手势,触摸,Scroll的动态更新动画的状态(本文会侧重讲解Animated.timing
) - 调用
Animated.timeing.start()
开始动画
基于上述的原理,我们来实现第一个动画。
创建一个Demo工程的时候,运行后,模拟器截图应该是酱紫的。
然后,只保留第一行文字,然后我们给这个默认的视图创建fade in动画,效果如下
代码
class Demo extends React.Component {
state: { //可以不写,我这里写是为了去除flow警告
fadeAnim: Object,
};
constructor(props) {
super(props);
this.state = {
fadeAnim: new Animated.Value(0), //设置初始值
};
}
componentDidMount() {
Animated.timing(
this.state.fadeAnim,//初始值
{toValue: 1}//结束值
).start();//开始
}
render() {
return (
<View style={styles.container}>
<Animated.Text style={
{opacity: this.state.fadeAnim}}>//绑定到属性
Welcome to React Native!
</Animated.Text>
</View>
);
}
}
所以说,简单的动画就是用Animated.Value
指定初始值,然后在Animated.timing
中设置结束值,其他的交给React native让它自动创建,我们只需要调用start
开始动画即可。
在当前版本0.27种,可动画的视图包括
- View
- Text
- Image
- createAnimatedComponent(自定义)
Animated详解
方法
static decay(value, config)
阻尼,将一个值根据阻尼系数动画到 0static timing(value, config
根据时间函数来处理,常见的比如线性,加速开始减速结束等等,支持自定义时间函数static spring(value, config)
弹性动画static add(a, b)
将两个Animated.value
相加,返回一个新的static multiply(a, b)
将两个Animated.value
相乘,返回一个新的static modulo(a, modulus)
,将a对modulus取余,类似操作符%static delay(time)
延迟一段时间static sequence(animations)
依次开始一组动画,后一个在前一个结束后才会开始,如果其中一个动画中途停止,则整个动画组停止static parallel(animations, config?)
,同时开始一组动画,默认一个动画中途停止,则全都停止。可以通过设置stopTogether
来重写这一特性static stagger(time, animations)
,一组动画可以同时执行,但是会按照延迟依次开始static event(argMapping, config?)
,利用手势,Scroll来手动控制动画的状态static createAnimatedComponent(Component)
,自定义的让某一个Component支持动画
属性
Value
,类型是AnimatedValue
,驱动基本动画AnimatedValueXY
,类型是AnimatedValueXY
,驱动二维动画
AnimatedValue类型
一个AnimatedValue一次可以驱动多个可动画属性,但是一个AnimatedValue一次只能由一个机制驱动。比如,一个Value可以同时动画View的透明度和位置,但是一个Value一次只能采用线性时间函数