一. Lottie动画为什么会出现?
1.为Android,iOS和React Native应用程序构建复杂的动画是一个艰难而漫长的过程,且维护困难,实现效果可能不一致,达不到设计师想要的效果.
2.使用图片或者代码生成的动画一般比较简单,很难完成复杂的动画.
3. 需求变更版本迭代会导致维护困难.
考虑到以上一些原因,Airbnb公司推出了Lottie开源库
二. Lottie动画的优缺点
优势:
1.跨平台,不同端共用一套动画.支持Android, iOS, React Native, Web, and Windows
2.动画由UI设计师通过After Effects软件制作,并由Bodymovin插件导出为JSON文件的动画数据,百分百符合设计师设计的效果,减少了沟通成本.
3. 支持多渠道加载动画,比如本地资源文件Assets,存储卡,网络等,可在线更新动画.
4 使用简单,开发者可以轻松控制动画的播放速度,播放进度,是否重复播放,播放帧数,背景颜色等等
5 对apk体积影响很小,未压缩情况下,增加apk包体积110k左右,压缩后为45k左右
劣势:
1.Lottie动画在未开启硬件加速的情况下,帧率、内存,CPU都比属性动画差,开启硬件加速后,性能差不多。
看到如此精美的动画,是不是有些心动呢? 赶紧来体验下吧
三 Lottie-android的使用
1.app module的build.gradle引入依赖:
dependencies {
implementation'com.airbnb.android:lottie:$lottieVersion' //目前最新的是3.3.1版本
}
特别注意(有坑):
Lottie 2.8.0 and above only supports projects that have been migrated to androidx.
2.8+以上版本需要在AndroidX项目中才可用,如果你的项目没有升级到AndroidX,最高可用版本是2.7.0.同时使用的动画必须是Bodymovin插件5.5以前版本导出的动画,才可以正常使用.或者如果设计师已经升级了Bodymovin插件,那么让她导出json格式的时候,选择导出兼容版本的json动画.
2. 准备好设计师提供的动画导出的gson文件,放置在src/main/assets(没有目录则自己创建该目录)文件夹下
ps: 我只是想使用,设计师也不会制作,怎么办? 去lottie社区下载吧
3 开发简单使用
方法一: 在xml布局中使用
方法二: xml布局只放置控件,代码控制使用
此外,Lottie还有很多高级使用方法,各位有兴趣的话,自己慢慢去探索吧.
参考文章:
网友评论