Lottie动画

最新推荐文章于 2025-07-04 09:06:04 发布

原创最新推荐文章于 2025-07-04 09:06:04 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android

Lottie动画

2018/1/17 13:19:08

地址

Lottie是什么？

Lottie 中文 “洛蒂”

Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative，利用json文件的方式快速实现动画效果的库。

Android几种动画比较

帧动画

使用帧动画。这种方式固然可行，但是一个需要动画添加很多张图片，势必会导致apk体积变大，并且还要根据不同的尺寸进行适配。

GIF

用 Gif。但是使用 Gif 占用空间较大，而且需要为各种屏幕尺寸、分辨率做适配，并且Android本是不支持gif直接展示的。

代码图片结合

用代码加图片辅助。如之前写的仿照驾校一点通欢迎页，这种方式繁琐并且每更新一次都需要重新写很多代码。

Android 5.x 之后提供了对 SVG 的支持，通过 VectorDrawable
AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画，但是问题和前2个类似。

Lottie 的优缺点

优点

Lottie就是支持Android, iOS, 和React Native,并且只需简单的代码就可以实现复杂动画效果的库

提供了一套完整的跨平台的动画实现工作流
相对于类似的实现方案GIF、手写动画、帧动画而言，这个方案更为轻量，性能和存储上都更佳。
从代码上看，Android 端的实现是基于 Drawable、iOS 端是基于 Layer —— 最终都是对 canvas 的操作，中间除去解析 json 外，基本无耗费性能的行为。（官方文档有提到，masks 和 mattes 动画较为耗费性能，原因是需要额外的 Bitmap 辅助，这点需注意）
也是因为动画由 json 文件描述，所以它的第三个优点是动画的更新及其方便。在之前，假如我们要完成动画动态更新需求，要么使用上述所说的 GIF、帧动画等方案，要么就自定义动画描述文件或用笨重的xml来完成动画。那么现在用 json 文件，简直再方便不过了。

缺点（仍然存在的问题）

Bodymovin 插件待完善，仍然有部分 AE 效果无法成功导出
Lottie 对 json 文件的支持待完善，目前有部分能成功导出成 json 文件的效果在移动端上无法很好的展现
目前不支持文字，所有文字必须转成矢量图才能正常展现动画
动画无法被编辑，即移动端无法更改远端下载到本地的动画

流程

下载软件AE (After Effects CC)

界面越来越好看（我是好青年，不说脏话）

界面

安装插件Bodymovin
地址

https://github.com/airbnb/lottie-web

说明我是程序员（AE 太多的我也不会）简单的导出动作

界面

窗口-扩展-Bodymovin

选择-选择输出路径(还有一些其他选项，自己研究)-Render

导出的文件

AE模板下载网站（推荐）

太多了不写了去原文看吧

https://www.zhihu.com/question/30888588

基本使用

效果

将json动画文件放在src/main/assets/

直接在xml中定义的方式

XML布局代码

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="true"
    app:lottie_fileName="live_and_love_in_2018.json"
    app:lottie_loop="true" />

在app:lottie_fileName写动画文件名称

Activity 代码

animation_view = findViewById(R.id.animation_view);
animation_view.setAnimation("animation-w128-h199.json");
animation_view.loop(true);
animation_view.playAnimation();

在XML布局中写了 app:lottie_fileName 属性，同时在代码中设置，代码的优先级高

使用代码的方式，支持从assets目录中直接读取json文件、json字符串的方式、stream流的方式等

从网络获取json文件，直接显示动画。这种方式很炫，你就可以不用不更新apk就不动声色的定期更新你的动画了。

完整代码

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.util.JsonReader;

import com.airbnb.lottie.LottieAnimationView;

import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.Reader;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;

public class MainActivity extends AppCompatActivity {

    // LottieAnimationView
    private LottieAnimationView animation_view;

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            //判断
            if (msg.what == 0) {
                //获取输入流
                InputStream obj = (InputStream) msg.obj;
                // 将流转换为Reader
                Reader reader = new InputStreamReader(obj);
                //创建JsonReader
                JsonReader jsonReader = new JsonReader(reader);
                //设置动画
                animation_view.setAnimation(jsonReader);
                //开始
                animation_view.playAnimation();


            }

        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 实例化控件
        animation_view = findViewById(R.id.animation_view);

        // 创建客户端
        OkHttpClient.Builder builder = new OkHttpClient.Builder();

        // 异步请求
        builder.build().newCall(new Request.Builder().url("http://123.56.1.161/LottieFiles/animation-w128-h199.json").build()).enqueue(new Callback() {


            // 请求失败
            @Override
            public void onFailure(Call call, IOException e) {

            }


            //请求成功
            @Override
            public void onResponse(Call call, Response response) throws IOException {

                //判断是否请求成功
                if (response.isSuccessful()) {


                    // 获取流
                    InputStream inputStream = response.body().byteStream();

                    //消息
                    Message message = new Message();

                    //设置流对象
                    message.obj = inputStream;

                    // 设置标识
                    message.what = 0;

                    //发送消息
                    handler.sendMessage(message);

                }
            }
        });
    }
}