Lottie简单使用

一、简介

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

现在使用各平台的 native 代码实现一套复杂的动画是一件很困难并且耗时的事，我们需要为不同尺寸的屏幕加载不同的素材资源，还需要写大量难维护的代码，而Lottie可以做到同一个动画文件在不同平台上实现相同的效果，极大减少开发时间，实现不同的动画，只需要设置不同的动画文件即可，极大减少开发和维护成本。

Lottie 地址：https://github.com/airbnb/lottie-android

Lottie 官网：https://airbnb.design/lottie/

为什么使用Lottie

1. 跨平台只有制作一套json动画文件便可以跨平台在 Android  ios ReactNeative上使用，lottie库负责解析json文件并播放动画

2. 可以支持网络下载json文件，本地播放，实时更新动画资源。

3. 运行时效率上仅仅用Canvas去draw而已，流畅度非常棒，所以哪怕在Listview里去大量显示，内存占用和绘图效率都远远高于帧动画。

4. 实现效果可以按设计出的100%还原到产品中

5. 开发周期大大减少

使用Lottie实现的效果

Android端使用方法

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

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

2. 添加 Adobe After Effects 导出的动画文件

Lottie默认读取Assets中的文件，我们需要把设计导出的动画文件.json 保存在app/src/main/assets文件里。

3. 使用Lottie

1. 直接布局加载*.json文件的方法：

  <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:lottie_fileName="Logo/LogoSmall.json"
            app:lottie_loop="true" />

lottie_fileName表示本地Assets文件中存的json动画文件

lottie_loop表示动画循环执行

2. 代码加载动画方法

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:lottie_fileName="hello-world.json"
            app:lottie_loop="true"
            app:lottie_autoPlay="true" />

lottie_autoPlay表示设置是否自动启动播放

        //声明控件
        lottieAnimationView = findViewById(R.id.animation_view);
        //这个可有可无，如果不涉及本地图片做动画可忽略
        lottieAnimationView.setImageAssetsFolder("images");
        //设置动画文件
        lottieAnimationView.setAnimation(".json");
        //是否循环执行
        lottieAnimationView.loop(true);
        //执行动画
        lottieAnimationView.playAnimation();

3. 加载网络.json文件

private void loadUrl(String url) {
        Request request = new Request.Builder().url(url).build();
        OkHttpClient client = new OkHttpClient();
        client.newCall(request).enqueue(new Callback() {
            @Override public void onFailure(Call call, IOException e) {}
            @Override public void onResponse(Call call, Response response) throws IOException {
                try {
                    JSONObject json = new JSONObject(response.body().string());
                    LottieComposition.Factory
                            .fromJson(getResources(), json, new OnCompositionLoadedListener() {
                                @Override
                                public void onCompositionLoaded(LottieComposition composition) {
                                    lottieAnimationView.setComposition(composition);
                                    lottieAnimationView.playAnimation();
                                }
                            });
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });
    }

常用方法

• animationView.isAnimating();  动画是否在播放
• animationView.playAnimation();    播放动画
• animationView.pauseAnimation();   暂停动画
• animationView.cancelAnimation();  取消动画
• animationView.setProgress(progress);  设置进度,progress范围0~1
• animationView.setMinAndMaxProgress(min,max);  设置播放范围，0~1
• 监听动画进度
• 设置动画硬件加速
• 缓存动画
• Lottie本身在 Android 平台已经做了适配工作，而且适配原理很简单，解析时，从 读取宽高之后会再乘以手机的密度。再在使用的时候判断适配后的宽高是否超过屏幕的宽高，如果超过则再进行缩放。以此保障 Lottie 在 Android 平台的显示效果

接入遇到的坑

1. 使用Lottie超过2.8.0版本必须兼容androidx，api28

2. 使用Lottie2.0系列的必须通知设计导出json文件的时候兼容旧版本，如下图：
   
   

3. 内存溢出情况原因分析：如果设计直接从PS里面做出的动画在AE里面导出，就会出现很多副本图片，我们加载json文件就会像帧动画一样循环那些图片，对于配置低的手机当我们几个动画同时循环播放的时候就会形成多张图片在那轮询造成内存溢出。

4. 机型适配问题需要注意：对于需要落到固定位置的动画，切记一定要让设计标出动画的尺寸

具体设计师如何生成json文件可以参考官方文档。