React Native学习——动画Animated（笔记）

很多地方都需要用到动画，先看下文档吧。

一、两个互补的动画系统

• 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