[TOC]

概述

配置动画

动画拥有非常灵活的配置项。自定义的或预定义的 easing 函数、延迟、持续时间、衰减系数、弹性常数等都可以在对应类型的动画中进行配置。

Animated提供了多种动画类型，其中最常用的要属Animated.timing(). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.

它支持使用各种预定义的缓动函数之一随时间动画值，也可以使用自己的缓动函数。在动画中，缓动函数通常用于表示对象的逐渐加速和减速。

By default, timing will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing a easing parameter. Custom duration or even a delay before the animation starts is also supported.

默认情况下，计时将使用easeInOut曲线，该曲线将逐渐加速到全速，并通过逐渐减速到停止来结束。您可以通过传递一个缓动参数来指定一个不同的缓动函数。还支持自定义持续时间，甚至是动画开始前的延迟。

1
2
3
4
5
6
7

Animated.timing(this.state.xPosition, {
  toValue: 100,
  easing: Easing.back(),
  duration: 2000
}).start();

组合动画

多个动画可以通过parallel（同时执行）、sequence（顺序执行）、stagger和delay来组合使用。它们中的每一个都接受一个要执行的动画数组，并且自动在适当的时候调用start/stop。

For example, the following animation coasts to a stop, then it springs back while twirling in parallel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Animated.sequence([
  // decay, then spring to start and twirl
  Animated.decay(position, {
    // coast to a stop
    velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
    deceleration: 0.997
  }),
  Animated.parallel([
    // after decay, in parallel:
    Animated.spring(position, {
      toValue: { x: 0, y: 0 } // return to start
    }),
    Animated.timing(twirl, {
      // and twirl
      toValue: 360
    })
  ])
]).start(); // start the sequence group

默认情况下，如果任何一个动画被停止或中断了，组内所有其它的动画也会被停止。Parallel 有一个stopTogether属性，如果设置为false，可以禁用自动停止。

在Animated文档的组合动画一节中列出了所有的组合方法。