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布局代码
在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); } } }); }}
更多相关文章
- android手机通讯录备份还原代码
- 详解Android获取系统内核版本的方法与实现代码
- Android 关于动画设置问题。
- 自定义圆形进度条ProgressBar的三种方式
- android典型代码系列(二十八)------通话记录的操作
- 【Android】Android清除本地数据缓存代码
- android--创建快捷方式和判断是否已经创建
- CyanogenMod开源代码