19.React Native动画效果操作集合四

目录

 

1.插值动画

1.1插值动画

1.2使用过程

2.动画组合

2.1Animated.parallel()并行启动动画

2.2Animated.sequence()按顺序启动动画

3.动画循环

4.跟踪动态值

5.跟踪手势

5.1Scroll滚动

6.响应当前的动画值

---

1.插值动画

1.1插值动画

每个属性都可以首先通过插值运行。插值将输入范围映射到输出范围，通常使用线性插值，但也支持放宽(easing)功能。默认情况下，它会将曲线外推到给定范围之外，但您也可以让它钳制输出值-指定输出值范围。

插值示例：

简单的示例将输入值[0,1]范围映射[0,100]输出范围；

value.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
});

例如，您可能希望考虑将动画Animated.Value()从0变为1，但将位置从150px变为0px，不透明度从0变为1。通过像这样修改上面示例中的样式，可以很容易地做到这一点;

style={
  {
    opacity: this.state.fadeAnim, //需要绑定插值的指定fadeAnim属性
    transform: [{
      translateY: this.state.fadeAnim.interpolate({    
        inputRange: [0, 1],    //设置输入的范围
        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0    //设置实际映射的输出范围
      }),
    }],
  }}

interpolate()还支持到字符串的映射，从而可以实现颜色以及带有单位的值的动画变换。例如你可以像下面这样实现一个旋转动画；

value.interpolate({
  inputRange: [0, 360],
  outputRange: ["0deg", "360deg"]
});

interpolate()还支持任意的渐变函数，其中有很多已经在Easing类中定义了，包括二次、指数、贝塞尔等曲线以及 step、bounce 等方法。interpolation还支持限制输出区间outputRange。你可以通过设置extrapolate、extrapolateLeft或extrapolateRight属性来限制输出区间。默认值是extend（允许超出），不过你可以使用clamp选项来阻止输出值超过outputRange。

1.2使用过程

a.初始化动画值

this.animation = new Animated.Value(this.props.progress);

b.绑定动画值到指定插值范围（示例动态调整宽度）

 //插入动画值（设置animation数值范围）
        //每个属性都可以首先通过插值运行。插值将输入范围映射到输出范围，
        // 通常使用线性插值，但也支持放宽功能。默认情况下，它会将曲线外推到给定范围之外，
        // 但您也可以让它钳制输出值。
        /**
         * 一个简单的例子0-1映射为0-100范围:
         * value.interpolate({
              inputRange: [0, 1],
              outputRange: [0, 100]
            });

         extrapolate：使用clamp选项来阻止输出值超过outputRange
         */
        const widthInterpolated = this.animation.interpolate({
            inputRange:[0, 1],
            outputRange:['0%', '100%'],
            extrapolate:'clamp'
        });

c.绑定插值给指定属性

width:widthInterpolated,

<Animated.View
                        style={
  {
                            position:"absolute",