Lottie动画

2018/1/17 13:19:08

地址

  • https://github.com/airbnb/lottie-android
  • https://www.lottiefiles.com/

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)

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

说明我是程序员（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);

                }
            }
        });
    }
}