react native 动画（Animated）基础介绍篇
2019-10-10 本文已影响0人
外星派来拯救coder的鼓励师
动画组件 Animatable components
在RN中可以使用动画组件有
View Text Image ScrollView FlatList SectionList
注意在使用上述动画组件是均以<Animated.xxxx>
动画变量值
在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
}
}
}]
)}
