用RN的Animated做一个简单的加载中动画
加载中 是APP中很常见的一种交互,自己也是刚入手React Native,加载列表的时候需要一个loading状态,那我们就开始吧。
首先撸一遍思路
- 首先,在ReactNative中要使我们的loading图标允许动画,我们可以使用
createAnimatedComponent()
创建的组件加载我们的图标,或者直接使用Animated下默认封装好了的:
Animated.Image
Animated.ScrollView
Animated.Text
Animated.View - 然后动画方式是我们熟悉的 属性:
transform
,写法和CSS3少许不同 - 接着是旋转动画
rotate
的值,通过Animated
的方法不断更新
从文档开始
ReactNative-Animated文档
Animated
的主要相关方法有4个:
Animated.decay()
Animated.spring()
Animated