一、简介
Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App 像使用静态素材一样使用这些动画,完美实现动画效果。
二、Lottie动画文件制作
1.让设计师使用Adobe 的 After Effects(简称 AE)工具(美工一般都会这个)制作这个动画。
2.在AE中安装一个叫做Bodymovin的插件。 下载 bodymovin,解压缩后只需要\build\extension\bodymovin.zxp这个档案就可以
3.手动安装plugin,以windows系统而言,要先下载 **ExMan Command Line tool **并解压缩。 再来把下载的bodymovin压缩后的 bodymovin-master\build\extension 目录下的bodymovin.zxp 这个档案复制进去同一个资料夹。
4.去找cmd,并以系统管理员身分执行。
5.打“cd C:/ExManCmd_win 所在的路径 “,进入ExManCmd的资料夹中
6.接着打 ExManCmd.exe /install bodymovin.zxp 就完成了
7.再来进入AE 后,可以在windows/extentions/bodymovin 找到插件,开启后按下Render 就完成了。 重点来了,这时会在你选的Destination Folder目录中生成一个json格式的文件,这个 json 文件描述了该动画的一些关键点的坐标以及运动轨迹。
android:focusableInTouchMode="true"
android:focusable="true"
好了废话不多说现在我们开始使用lottie
Lottie支持多平台,使用同一个JSON动画文件,可在不同平台实现相同的效果。支持Android,ios,前段。
1.依赖
在项目的 build.gradle 文件添加依赖
dependencies { compile 'com.airbnb.android:lottie:2.1.0'}
2.动画文件
第一种方法,将我们所需要的动画文件loading.json保存在app/src/main/assets文件里。
第二种方法,网络上AE生成的动画文件。(网络链接)
3.使用
在布局文件中使用
<com.airbnb.lottie.LottieAnimationView
android:id=