很多地方都需要用到动画,先看下文档吧。
一、两个互补的动画系统
- LayoutAnimation:用于全局的布局动画
- Animated:用于创建更精细的交互控制的动画(主要是这个)
二、Animated动画组件
- 已封装动画组件
Animated.Image
Animated.ScrollView
Animated.Text
Animated.View
- 自定义动画组件
- 可以使用
Animated.createAnimatedComponent()
来封装自己的组件
- 可以使用
三、两种类型的值
Animated.Value()
用于单个值。Animated.ValueXY()
用于矢量值
注:Animated.Value
可以绑定到样式或是其他属性上,也可以进行插值运算。单个Animated.Value
可以用在任意多个属性上。
四、三种动画类型
Animated.decay()
以指定的初始速度开始变化,然后变化速度越来越慢直至停下(递减)
velocity
: 初始速度。必填。deceleration
: 衰减系数。默认值0.997。useNativeDriver
: 使用原生动画驱动。默认不启用(false)。
Animated.spring()
提供了一个简单的弹性模型
friction
:控制“反弹”/过冲。默认7。tension
:控制速度。默认40。speed
:控制动画的速度。默认12。bounciness
:控制弹性。默认8。useNativeDriver
:使用原生动画驱动。默认不启用(false)。
Animated.timing()
随着时间变化,使value按照easing函数进行变化
duration
:动画的持续时间(毫秒)。默认值为500。easing
:easing函数来定义曲线。默认值为Easing.inOut(Easing.ease)
。delay
:开始动画前的延迟时间(毫秒)。默认为0。useNativeDriver
:使用原生动画驱动。默认不启用(false)。
五、组合动画
Animated.delay()
在给定的延迟后开始动画。Animated.parallel()
同时启动一些动画。Animated.sequence()
按顺序启动动画,一个完成再开始下一个。Animated.stagger()
一个动画数组,里面的动画有可能会同时执行(重叠),不过会以指定的延迟来开始。starts animations in order and in parallel, but with successive delays.
注:默认情况下,如果一个动画停止或中断,则组中的所有其他动画也会停止。
六、合成动画值
Animated.add() 将两个动画值相加计算,得出一个新的动画值
Animated.divide() 相除
Animated.modulo() 取模(取余数)
Animated.multiply() 相乘
七、插值
interpolate()
注:已知离散点,且插值函数要过每个离散点,离散点以外的就是插值(个人理解)
八、处理手势和其他事件
Animated.event()
--------------------------------------
没写例子,等我整明白滴(。-ω-)zzz