动画

ReactXP 支持强大的动画抽象。可以为单个样式元素（例如变换、不透明度或 backgroundColor）制作动画。

可动画组件

四个基本的 RX 类可以有可动画样式

Animated.View
Animated.Image
Animated.Text
Animated.TextInput

这些组件类型应该在渲染方法中代替普通的 View、Image、Text 或 TextInput 使用。通常，以数值或颜色表示的样式属性可以动画化。具有文本值（例如 flexDirection 或 fontWeight）的属性无法动画化。

动画值

以下示例展示了如何创建具有初始值的动画值。动画值通常作为实例变量存储在组件类中。它们也可以存储在状态结构中。

let animatedOpacityValue = RX.Animated.createValue(1.0);
let animatedScaleValue = RX.Animated.createValue(1.0);

对于动画颜色值，可以创建从数字范围映射到颜色范围的插值值。在此示例中，当值从 0 增加到 1 时，颜色值从白色平滑过渡到红色再到黑色。

let animatedColorValue = RX.Animated.createValue(0.0);
let interpolatedValue = RX.Animated.interpolate(animatedColorValue,
    [0.0, 0.5, 1.0], ['white', 'red', 'black']);

动画样式

一旦创建了动画值，它就可以与动画样式关联。

某些动画样式值的开销比其他值高。有些会影响元素的布局（例如 width、height、top、left），因此在动画的每个阶段都需要调用布局引擎。避免这些并坚持使用不影响布局的样式（例如 opacity 和 transforms）会更快。

此示例演示了样式表如何包含多个动画值。

let animatedStyle = RX.Styles.createAnimatedViewStyle({
    opacity: animatedOpacityValue,
    transform: [{
        scale: animatedScaleValue
    }]
});

动画样式表可以与其他静态样式结合使用。

render() {
    <RX.Animated.View style={ [_styles.staticStyle, animatedStyle] } />
}

简单计时动画

要描述一个动画，请指定动画值的最终值和持续时间（以毫秒为单位）。可选的缓动函数允许各种动画曲线，包括线性、步进和三次贝塞尔曲线。

动画定义后，调用 start() 方法即可开始动画。start 方法接受一个可选参数，即动画完成时执行的回调。

let opacityAnimation = RX.Animated.timing(animatedScaleValue,
    { toValue: 0.0, duration: 250, easing: RX.Animated.Easing.InOut() }
);

opacityAnimation.start(() => this._doSomethingWhenAnimationCompletes());

复合动画

有时并行或按顺序执行多个动画会很有用。这可以通过调用 RX.Animated.parallel() 或 RX.Animated.sequence() 轻松实现。复合动画可以嵌套以创建复杂的序列。

let compositeAnimation = RX.Animated.parallel([
    RX.Animated.timing(animatedScaleValue,
        { toValue: 0.0, duration: 250, easing: RX.Animated.Easing.InOut() }
    ),
    RX.Animated.timing(animatedOpacityValue,
        { toValue: 1.1, duration: 250, easing: RX.Animated.Easing.Linear() }
    )
]);

compositeAnimation.start();

直接设置动画值

可以通过调用 setValue 方法直接设置动画值。如果在动画值正在动画化时调用此方法，则行为未定义。直接设置动画值比使用非动画样式属性并使用新属性值重新渲染组件要快。

let animatedOpacityValue = RX.Animated.createValue(1.0);

animatedOpacityValue.setValue(0.0);

Web 限制

ReactXP 在 Web 上的动画 API 是使用 DOM 样式转换实现的，而不是使用 JavaScript 代码驱动动画。这带来了更好的性能，并且（在大多数情况下）无故障动画，但也对动画 API 的使用施加了一些限制。

与特定元素关联的所有活动动画值必须共享相同的计时参数（持续时间、缓动函数、延迟、循环），并且必须同时启动。
每个动画值只能与一个正在活动的动画属性关联。
与 startTransition 一起使用的插值值仅限于两个值——开始值和结束值——并且必须按升序指定。
不与 startTransition 一起使用的插值值必须具有数值输出值，因为我们自己正在它们之间进行插值。
对于插值值，过渡动画的开始值和结束值必须对应于两个插值键。
如果动画停止，在变换和插值值的情况下，该值将不会反映中间位置。

动画