The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.

The simplest workflow for creating an animation is to to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():

Animated.timing(                            // Animate value over time
  this.state.fadeAnim,                      // The value to drive
    toValue: 1,                             // Animate to final value of 1
).start();                                  // Start the animation

Refer to the 动画文档 guide to see additional examples of Animated in action.


There are two value types you can use with Animated:

  • Animated.Value() for single values
  • Animated.ValueXY() for vectors

Animated.Value can bind to style properties or other props, and can be interpolated as well. A single Animated.Value can drive any number of properties.


Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:

  • Animated.decay() starts with an initial velocity and gradually slows to a stop.
  • Animated.spring() provides a simple spring physics model.
  • Animated.timing() animates a value over time using easin函数.

In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.

Working with animations#

Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.

Using the native driver#

By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.

You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.

Animatable components#

Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.

  • createAnimatedComponent() can be used to make a component animatable.

Animated exports the following animatable components using the above wrapper:

  • Animated.Image
  • Animated.ScrollView
  • Animated.Text
  • Animated.View

Composing animations#

Animations can also be combined in complex ways using composition functions:

  • Animated.delay() starts an animation after a given delay.
  • Animated.parallel() starts a number of animations at the same time.
  • Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.
  • Animated.stagger() starts animations in order and in parallel, but with successive delays.

Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See 跟踪动态值 values in the Animations guide.

By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.

Combining animated values#

You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:

  • Animated.add()
  • Animated.divide()
  • Animated.modulo()
  • Animated.multiply()


The interpolate() function allows input ranges to map to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. It uses lineal interpolation by default but also supports easing functions.

  • interpolate()

Read more about interpolation in the 动画文档。

Handling gestures and other events#

Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.

  • Animated.event()

For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value):

   // scrollX = e.nativeEvent.contentOffset.x
   [{ nativeEvent: {
        contentOffset: {
          x: scrollX


static decay(value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig) #



  • velocity: 初始速度。必填。
  • deceleration: 衰减系数。默认值0.997。
  • useNativeDriver: 使用原生动画驱动。默认不启用(false)。

static timing(value: AnimatedValue | AnimatedValueXY, config: TimingAnimationConfig) #



  • duration: Length of animation (milliseconds). Default 500.
  • easing: Easing function to define curve. Default is Easing.inOut(Easing.ease).
  • delay: Start the animation after delay (milliseconds). Default 0.
  • useNativeDriver: 使用原生动画驱动。默认不启用(false)。

static spring(value: AnimatedValue | AnimatedValueXY, config: SpringAnimationConfig) #


Config参数有以下这些属性(注意你不能同时定义bounciness/speed和 tension/friction这两组,只能指定其中一组):

  • friction: Controls "bounciness"/overshoot. Default 7.
  • tension: Controls speed. Default 40.
  • speed: Controls speed of the animation. Default 12.
  • bounciness: Controls bounciness. Default 8.
  • useNativeDriver: 使用原生动画驱动。默认不启用(false)。

static add(a: Animated, b: Animated) #


static divide(a: Animated, b: Animated) #


static multiply(a: Animated, b: Animated) #


static modulo(a: Animated, b: Animated) #


static diffClamp(a, min, max) #

Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (value = clamp(value + diff, min, max)).

This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down.

static delay(time: number) #


static sequence(animations: Array<CompositeAnimation>) #


static parallel(animations: Array<CompositeAnimation>, config?: ParallelConfig) #


static stagger(time: number, animations: Array<CompositeAnimation>) #


static loop(animation) #

Loops a given animation continuously, so that each time it reaches the end, it resets and begins again from the start. Can specify number of times to loop using the key 'iterations' in the config. Will loop without blocking the UI thread if the child animation is set to 'useNativeDriver'.

static event(argMapping: Array<Mapping>, config?: EventConfig) #


   [{nativeEvent: {contentOffset: {x: this._scrollX}}}]
   {listener},          // 可选的异步监听函数
 onPanResponderMove: this.AnimatedEvent([
   null,                // 忽略原始事件
   {dx: this._panX},    // 手势状态参数

static createAnimatedComponent(Component: any) #


static attachNativeEvent(viewRef, eventName, argMapping) #

Imperative API to attach an animated value to an event on a view. Prefer using Animated.event with useNativeDrive: true if possible.

static forkEvent(event, listener) #

Advanced imperative API for snooping on animated events that are passed in through props. Use values directly where possible.

static unforkEvent(event, listener) #


Value: AnimatedValue #

表示一个数值的类,用于驱动动画。通常用new Animated.Value(0);来初始化。

ValueXY: AnimatedValueXY #


Interpolation: AnimatedInterpolation #

exported to use the Interpolation type in flow

See also AnimatedInterpolation.

class AnimatedValue#



constructor(value: number) #

setValue(value: number) #


setOffset(offset: number) #


flattenOffset() #


extractOffset() #

Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.

addListener(callback: ValueListenerCallback) #


removeListener(id: string) #

removeAllListeners() #

stopAnimation(callback?: ?(value: number) => void) #


resetAnimation(callback?) #

Stops any animation and resets the value to its original

interpolate(config: InterpolationConfigType) #


animate(animation: Animation, callback: EndCallback) #


stopTracking() #


track(tracking: Animated) #


class AnimatedValueXY#



class DraggableView extends React.Component {
   constructor(props) {
     this.state = {
       pan: new Animated.ValueXY(), // inits to zero
     this.state.panResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onPanResponderMove: Animated.event([null, {
         dx: this.state.pan.x, // x,y are Animated.Value
         dy: this.state.pan.y,
       onPanResponderRelease: () => {
           this.state.pan,         // Auto-multiplexed
           {toValue: {x: 0, y: 0}} // Back to zero
   render() {
     return (


constructor(valueIn?: ?{x: number | AnimatedValue; y: number | AnimatedValue}) #

setValue(value: {x: number; y: number}) #

setOffset(offset: {x: number; y: number}) #

flattenOffset() #

stopAnimation(callback?: ?() => number) #

addListener(callback: ValueXYListenerCallback) #

removeListener(id: string) #

getLayout() #

将一个{x, y}组合转换为{left, top}以用于样式。例如:


getTranslateTransform() #

将一个{x, y} 组合转换为一个可用的位移变换(translation transform),例如:

   transform: this.state.anim.getTranslateTransform()

class AnimatedInterpolation#


constructor(parent, config) #

interpolate(config) #