文章大纲

一、Lottie介绍
二、Lottie实战
三、项目源码下载
四、参考文章

 

一、Lottie介绍

1. 什么是Lottie

??Lottie是Android和iOS的移动库，用于解析Adobe After Effects动画与Bodymovin一起导出为json 并在移动设备上呈现它们！其实在移动端就是通过一个json文件显示相应的动画，其实这样很好的解决了动态改变动画的能力，只需要动态加载相应的josn文件就能实现动画的改变。（josn由美工提供）

2. Lottie优点

（1）能够解析渲染通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成的 json 文件
（2）数据源多样性—可从assets,sdcard,网络加载动画资源，动态更新
（3）跨平台—设计稿导出一份动画描述文件，android,ios,react native通用（android使用的api不能低于16）

3. Lottie动画制作流程图

 

4. Lottie例子

 

二、Lottie实战

1. 常见的API介绍

（1）判断是否动画正在运行中
??isAnimating()
（2）设置动画的进度值(float值)
??setProgress();
（3）监听动画进度
??addAnimatorUpdateListener
（4）开始动画
??playAnimation()
（5）动态设置json文件
??setComposition

2. 代码实操

（1）在项目的 build.gradle 文件添加依赖

dependencies {
    implementation 'com.android.support:appcompat-v7:24+' //lottie依赖 implementation 'com.airbnb.android:lottie:1.0.1' //网络请求相关依赖 implementation 'com.squareup.okhttp3:okhttp:3.5.0' } 

（2）相关json文件

 

（3）xml加载Lottie动画

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:orientation="vertical" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <!--如此，动画就能跑起来了，解释下一下属性： 1.lottie_fileName：在app/src/main/assets目录下的动画json文件名。 2.lottie_loop：动画是否循环播放，默认不循环播放。 3.lottie_autoPlay：动画是否自动播放，默认不自动播放。 4.alottie_imageAssetsFolder：动画所依赖的图片目录，在pp/src/main/assets/目录下的子目录，该子目录存放所有图片。--> <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="data.json" app:lottie_loop="true" app:lottie_autoPlay="true"/> </LinearLayout> 

其他常见api：
（1）lottie_repeatCount 重复次数
（2）lottie_repeatMode 设置动画的重复模式RESTART：重复、REVERSE：反向
（3）lottie_colorFilter 设置动画的着色颜色，这个就是把你的动画变成了一个颜色的了

Activity代码如下所示

/** * 简单动画 */ public class SimpleActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // activity_simple.xml中 lottie_fileName="data.json" // 所以只需要在 app/src/main/assets 中添加AE 生成的 json文件，重命名为data.json就可以显示动画 setContentView(R.layout.activity_simple); } } 

（4）Activity中加载Lottie
xml文件如下

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_he