react native 动画（Animated）基础介绍篇

动画组件 Animatable components

在RN中可以使用动画组件有
View Text Image ScrollView FlatList SectionList
注意在使用上述动画组件是均以

---

动画变量值

在RN中有两种值可以用于Animated中，分别是：

• Animated.Value() -- 单个值

• Animated.ValueXY() -- 向量值

---

动画类型

• Animated.decay() --加速类

• Animated.spring() --弹跳类

• Animated.timing() --常用，时间渐变类

---

动画组合Composing animations

• animated.delay() -- 延迟动画

• animated.parallel()--同时动画

• animated.sequence()--顺序动画

• animated.stagger()--交错动画

---

插值Interpolation

其中vulue为动画变量值，根据value的值输入变化而变化，比如输入的范围为0-1，输出范围就是0-100，最爽地方是要是value值为0.5的时候，输入值就会自动计算为50
这里面的接受的参数有数字，颜色，角度

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

---

处理相关事件（手势或者其他）

下面为ScrollView的手势发生时onScroll属性，RN可以通过Animated.event()来获取一些事件的值，如e.nativeEvent.contentOffset.y就是获取到onScroll垂直滚动的值。

下列例子就是Animated将ScrollView中上下滑动的参数（e.nativeEvent.contentOffset.y）赋值到scrollY身上，当然该值的类型应该为Animated.Value

 onScroll={Animated.event(
   // scrollY = e.nativeEvent.contentOffset.y
   [{ nativeEvent: {
        contentOffset: {
          y: scrollY
        }
      }
    }]
 )}

参考Reference

RN官方Animated API
RN官方Animated参数手册
alloyteam腾讯前端对RN动画库详解