Voyz's Studio.

RN的动画系统

React Native
字数统计: 1.8k阅读时长: 6 min
2019/04/24 Share

RN动画系统–Animated

流畅、有意义的动画对于移动应用用户体验来说是非常重要的。现实生活中的物体在开始移动和停下来的时候都具有一定的惯性，我们在界面中也可以使用动画来实现契合物理规律的交互。

React Native提供了两个互补的动画系统：用于创建精细的交互控制的动画Animated和用于全局的布局动画LayoutAnimation。

Animated简介

Animated使得开发者可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。Animated旨在以声明的形式来定义动画的输入与输出，在其中建立一个可配置的变化函数，然后使用简单的start/stop方法来控制动画按顺序执行。

Animated仅封装了四个可以动画化的组件：View Text Image ScrollView，不过也可以使用 Animated.createAnimatedComponent()来封装你自己的组件。

Animated的属性和方法

方法

  • decay
  • timing
  • spring
  • add
  • subtract
  • divide
  • multiply
  • modulo
  • diffClamp
  • delay
  • sequence
  • parallel
  • stagger
  • loop
  • event
  • forkEvent
  • unforkEvent

属性

  • Value
  • ValueXY
  • Interpolation
  • Node
  • createAnimatedComponent
  • attachNativeEvent

方法及参数

decay(value, config)

推动一个值以一个初始的速度和一个衰减系数逐渐变为0。

1
2
3
4
velocity：初始速度。必填。    
deceleration：衰减系数。默认值0.997。    
isInteraction：指定本动画是否在InteractionManager的队列中注册以影响其任务调度。默认值为true。    
useNativeDriver：启用原生动画驱动。默认不启用（false）。

timing(value, config)

推动一个值按照一个缓动曲线而随时间变化。Easing模块定义了一大堆曲线，你也可以使用你自己的函数。

1
2
3
4
5
duration：动画的持续时间（毫秒）。默认值为500。  
easing：缓动函数。默认为Easing.inOut(Easing.ease)。  
delay：开始动画前的延迟时间（毫秒）。默认为0。  
isInteraction：指定本动画是否在InteractionManager的队列中注册以影响其任务调度。默认值为true。  
useNativeDriver：启用原生动画驱动。默认不启用（false）。

spring(value, config)

根据基于阻尼谐振动阻尼谐振动的弹性模型生成一个动画值。它会在toValue值更新的同时跟踪当前的速度状态，以确保动画连贯。可以链式调用。

[ 注意不能同时定义bounciness / speed，tension / friction或stiffness / damping / mass这三组数据，只能指定其中一组：
摩擦/张力或弹跳/速度选项与Facebook Pop，Rebound和Origami中的弹簧模型相匹配 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
friction：控制“bounciness”/ overhoot。默认7。  
tension：控制速度。默认40。  
speed：控制动画的速度。默认12。  
bounciness：控制弹性。默认8。将刚度/阻尼/质量指定为参数Animated.spring使用基于阻尼谐振子的运动方程的分析弹簧模型。这种行为稍微精确一点，忠实于弹簧动力学背后的物理学，并且非常模仿iOS的CASpringAnimation原语中的实现。 
stiffness：弹簧刚度系数。默认100。   
damping：定义如何通过摩擦力使弹簧的运动受到阻尼。默认10。  
mass：附着在弹簧末端的物体的质量。默认1。
  
其他配置选项如下：    
velocity：附着在弹簧上的物体的初始速度。默认值为0（对象处于静止状态）。  
overshootClamping：布尔值，指示弹簧是否应夹紧而不是弹跳。默认为false。  
restDisplacementThreshold：静止位移的阈值，低于该阈值时应考虑弹簧处于静止状态。默认值为0.001。  
restSpeedThreshold：静止时应考虑弹簧的速度，以每秒像素为单位。默认值为0.001。  
delay：延迟（毫秒）后启动动画。默认值为0。  
isInteraction：指定本动画是否在InteractionManager的队列中注册以影响其任务调度。默认值为true。  
useNativeDriver：启用原生动画驱动。默认不启用（false）

add(a, b)

将两个动画值相加计算，得出一个新的动画值。

subtract(a, b)

将两个动画值相减计算，得出一个新的动画值。

divide(a, b)

将两个动画值相除计算，得出一个新的动画值。

multiply(a, b)

将两个动画值相乘计算，得出一个新的动画值。

modulo(a, modulus)

将两个动画值做取模（取余数）计算，得出一个新的动画值。

diffClamp(a, min, max)

创建一个限制在2个值之间的新动画值。它使用最后一个值之间的差值，因此即使该值远离边界，它也会在值开始再次接近时开始变化。（value = clamp(value + diff, min, max)）。

这对于滚动事件很有用，例如，在向上滚动时显示导航栏并在向下滚动时隐藏它。

delay(time)

在指定的延迟之后开始动画。

sequence(animations)

按顺序执行一个动画数组里的动画，等待一个完成后再执行下一个。如果当前的动画被中止，后面的动画则不会继续执行。

parallel()(animations, config?)

同时开始一个动画数组里的全部动画。默认情况下，如果有任何一个动画停止了，其余的也会被停止。可以你通过stopTogether选项对话来改变这个效果。

stagger(time, animations)

一个动画数组，里面的动画有可能会同时执行（重叠），不过会以指定的延迟来开始。适用于制作拖尾效果。

loop(animation, config?)

无限循环一个指定的动画，从头到尾周而复始。如果子动画设置为，则不阻止UI线程循环useNativeDriver: true。此外，循环可以防止VirtualizedList基于动画的组件在动画运行时渲染更多行。您可以传入isInteraction: false子动画配置来修复此问题。

Config是一个可能具有以下选项的对象：

1
iterations：动画应循环的次数。默认-1（无限）。

event(argMapping, config?)

接受一个映射的数组，对应的解开每个值，调用然后所有对应的输出的setValue方法例如：

1
2
3
4
5
6
7
8
9
10
 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
   {listener: (event) => console.log(event)}, // 可选的异步监听函数
 )}
 ...
 onPanResponderMove: Animated.event([
   null,                // 忽略原始事件
   {dx: this._panX}],    // 手势状态参数
{listener: (event, gestureState) => console.log(event, gestureState)}, // 可选的异步监听函数
 ),
1
2
3
4
5
listener：可选的异步监听函数
useNativeDriver：启用原生动画驱动。默认不启用（false）。
forkEvent()
static forkEvent(event, listener)
用于窥探通过props传递的动画事件的高级命令式API。它允许向现有的新javascript侦听器添加AnimatedEvent。如果animatedEvent是一个简单的javascript监听器，它会将2个监听器合并为一个监听器，如果animatedEvent为null / undefined，它将直接分配javascript监听器。尽可能直接使用值。

unforkEvent(event, listener)

属性及参数

Value

驱动动画运行的一维标量值。使用一般new Animated.Value(0);来初始化。

ValueXY

驱动2D动画运行的二维向量值，比如用在手势动画中。

Interpolation

导出为在流中使用Interpolation类型。

Node

导出为便于类型检查。所有动画值都来自此类。

createAnimatedComponent

封装任意React组件，使其可以动画化。Animated.View等内置组件就是通过这一方法封装的。

attachNativeEvent

用于将动画值附加到视图上的事件的命令式API。喜欢使用Animated.event与useNativeDrive: true如果可能的话。

CATALOG
  1. 1. RN动画系统–Animated
    1. 1.1. Animated简介
    2. 1.2. Animated的属性和方法
      1. 1.2.1. 方法
      2. 1.2.2. 属性
    3. 1.3. 方法及参数
      1. 1.3.1. decay(value, config)
      2. 1.3.2. timing(value, config)
      3. 1.3.3. spring(value, config)
      4. 1.3.4. add(a, b)
      5. 1.3.5. subtract(a, b)
      6. 1.3.6. divide(a, b)
      7. 1.3.7. multiply(a, b)
      8. 1.3.8. modulo(a, modulus)
      9. 1.3.9. diffClamp(a, min, max)
      10. 1.3.10. delay(time)
      11. 1.3.11. sequence(animations)
      12. 1.3.12. parallel()(animations, config?)
      13. 1.3.13. stagger(time, animations)
      14. 1.3.14. loop(animation, config?)
      15. 1.3.15. event(argMapping, config?)
      16. 1.3.16. unforkEvent(event, listener)
    4. 1.4. 属性及参数
      1. 1.4.1. Value
      2. 1.4.2. ValueXY
      3. 1.4.3. Interpolation
      4. 1.4.4. Node
      5. 1.4.5. createAnimatedComponent
      6. 1.4.6. attachNativeEvent
Total : 137
2021
2020
2019
2018
技术贴 JavaScript Flutter 算法题 热题HOT100 哈希表 滑动窗口 回溯算法 链表 二分法 矩阵 动态规划 贪心算法 指针 快速排序 迭代 二叉树 数组 快慢指针 排序 背包问题 单调栈 栈 DFS 岛屿问题 React Native React 旅行记 效率工具 python 小程序 英语 生活 足球 算法 性能优化 ES6 TypeScript koa