react native react-native-lottie
2017-11-23 本文已影响117人
FFF_Wang
Doing.jpeg
Example1.gif
Example2.gif
Example3.gif
Community 2_3.gif
Example4.gif
相关链接
react-native-lottie https://github.com/airbnb/lottie-react-native
AE http://www.sdifen.com/mac-adobe-after-effecs-cc.html
AE 插件 Bodymovin https://zhuanlan.zhihu.com/p/25935006
lottie API https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md
zxp安装器
安装Lottie node模块库
npm i --save lottie-react-native
react-native link lottie-ios
react-native link lottie-react-native/
Lottie支持的平台：
支持：iOS、macOS、Android、React Native
当然swift也支持！！！
使用流程
-
使用Adobe After Effects软件做出特效动画;
-
通过bodymovin项目工具把特效动画采用JSON格式文件进行导出;
-
用Lottie库进行解析JSON文件并且在移动端上面渲染效果即可。
react-native-lottie 相关
| 属性 | 默认值 | ++ |
|---|---|---|
| style | 无 | null |
| source | 无 | null |
| progress | 0 | 大于1正常播放 |
| loop | false | 是否循环播放 |
| speed | 1 | 正值正放 负值负放 0~ |
| 方法 | ++ |
|---|---|
| play | 播放 |
| reset | 停止播放 |
think.jpeg
不足：
1、对一些AE的属性支持不够完全。
2、对系统平台版本限制，如 iOS8 及以上，安卓 API14 及以上。
3、对可交互的动画暂时还不行。主要是以播放类型动画。
finish.jpg
