动画组件 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
}
}
}]
)}