Animated

参考文档

Animated库旨在使动画变得流畅，强大并易于构建和维护。Animated侧重于输入和输出之间的声明性关系，以及两者之间的可配置变换，此外还提供了简单的 start/stop方法来控制基于时间的动画执行。

创建动画最基本的工作流程是先创建一个 Animated.Value ，将它连接到动画组件的一个或多个样式属性，然后使用Animated.timing()通过动画效果展示数据的变化.

查看 Props

继承了所有View Props.

</table>

方法

如果下面的方法参数是二维向量值 ValueXY 而不是单一标量值 Value，则对应的配置参数 config 也应该是二维向量形式{x: ..., y: ...}。

decay()

static decay(value, config)

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

Config 参数有以下这些属性：

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

timing()

static timing(value, config)

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

Config 参数有以下这些属性：

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

spring()

static spring(value, config)

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

Config 参数有以下这些属性：

注意你不能同时定义 bounciness/speed、tension/friction 或 stiffness/damping/mass 这三组数据，只能指定其中一组：

friction/tension 或 bounciness/speed 选项符合Facebook Pop, Rebound, 或是 Origami中的 spring 模型定义。

• friction: 控制弹性/幅度。默认值 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()

static add(a, b)

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

subtract()

static subtract(a, b)

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

divide()

static divide(a, b)

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

multiply()

static multiply(a, b)

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

diffClamp()

static diffClamp(a, min, max)

创建一个限制在2个值之间的新的Animated值。 它使用最后一个值之间的差，因此，即使该值远离边界，它也会在值再次开始接近时开始更改。 （值=钳位（值+差异，最小值，最大值））。

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

delay()

static delay(time)

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

sequence()

static sequence(animations)

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

parallel()

static parallel(animations, config?)

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

stagger()

static stagger(time, animations)

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

loop()

static loop(animation, config?)

无限循环一个指定的动画，从头到尾周而复始。如果此循环的子动画设置了useNativeDriver: true则不会阻塞 JS 线程的执行。此外循环可能导致基于VirtualizedList的列表不能加载更多行，此时可以在子动画中设置isInteraction: false来修复此问题。

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

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

event()

static event(argMapping, config?)

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

 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)}, // 可选的异步监听函数
 ),

Config 参数有以下这些属性：

• listener: 可选的异步监听函数
• useNativeDriver: 启用原生动画驱动。默认不启用(false)。

forkEvent()

static forkEvent(event, listener)

用于侦听通过道具传入的动画事件。 它允许向现有的AnimatedEvent添加新的JavaScript侦听器。 如果animationEvent是一个javascript侦听器，则它将两个侦听器合并为一个侦听器；如果animationEvent为null / undefined，它将直接分配该javascript侦听器。 尽可能直接使用值。

unforkEvent()

static unforkEvent(event, listener)

start()

static start([callback]: ?(result?: {finished: boolean}) => void)

通过在动画上调用start（）来启动动画。 start（）接受完成回调，该完成回调将在动画制作完成或动画制作完成时调用，因为在完成之前已对其调用stop（）。

参数：

示例：

Animated.timing({}).start(({ finished }) => {
  /* completion callback */
});

stop()

static stop()

停止动画

reset()

static reset()

停止任何正在运行的动画并将其值重置为其原始值。

Example

示例

import React from 'react';
import {Animated, Text, View} from 'react-native';

class Demo extends React.Component {
    constructor() {
        super();
        this.state = {
            fadeAnim: new Animated.Value(0),
        }
    }

    componentDidMount() {
        Animated.timing(
            this.state.fadeAnim,
            {
                toValue: 1,
                duration: 10000,
                useNativeDriver:true
            }
        ).start();
    }

    render() {
        let {fadeAnim} = this.state;

        return (
            <Animated.View
                style={{
                    ...this.props.style,
                    opacity: fadeAnim,
                }}
            >
                {this.props.children}
            </Animated.View>
        );
    }
}

export default class App extends React.Component {
    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Demo style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
                    <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>动画</Text>
                </Demo>
            </View>
        )
    }
}