react native react-native-lottie

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