Lottie-android动画介绍与使用


Lottie-android动画介绍与使用_第1张图片
Lottie-android动画介绍与使用_第2张图片
Lottie-android动画介绍与使用_第3张图片

一. 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动画.


Lottie-android动画介绍与使用_第4张图片

        2. 准备好设计师提供的动画导出的gson文件,放置在src/main/assets(没有目录则自己创建该目录)文件夹下

                    ps: 我只是想使用,设计师也不会制作,怎么办? 去lottie社区下载吧

        3 开发简单使用

            方法一:  在xml布局中使用

Lottie-android动画介绍与使用_第5张图片

            方法二: xml布局只放置控件,代码控制使用

                    

Lottie-android动画介绍与使用_第6张图片


Lottie-android动画介绍与使用_第7张图片

        此外,Lottie还有很多高级使用方法,各位有兴趣的话,自己慢慢去探索吧.

参考文章:

lottie官方介绍

Android Lottie动画使用

你可能感兴趣的:(Lottie-android动画介绍与使用)