Lottie动画

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)

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

• 界面

• 安装插件Bodymovin

• 地址

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

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

• 界面

• 窗口-扩展-Bodymovin

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

• 导出的文件

AE模板下载网站（推荐）

• http://www.adobeae.com/

• http://c4dsky.com/

• https://www.shareae.cn/

• http://www.3tis.cn/

• http://www.ae60.com/

• https://www.93cg.com/

• http://www.lookae.com/

• https://www.htzyw.com/

太多了不写了 去原文看吧

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);
  
                  }
              }
          });
      }
  }