android ，web等使用 lottie 动画框架流程

前言

lottie-android
一句话介绍：一款可以在Android端快速展示Adobe Afeter Effect（AE）工具所作动画的框架

上榜理由：动画类框架第一名，github上13.3k个star证明了他的优越性，利用json文件快速实现动画效果是它最大的便利，而这个json文件也是由Adobe提供的After Effects（AE）工具制作的，在AE中装一个Bodymovin的插件，使用这个插件最终将动画效果生成json文件，这个json文件即可由LottieAnimationView解析并生成绚丽的动画效果。而且它还支持跨平台哟。

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

作者：Airbnb 团队

支持平台： Lottie for Android, iOS, React Native, Web, and Windows

正文：

第一步：工具准备

1，Adobe Afeter Effect安装

2，Bodymovin插件安装

https://github.com/airbnb/lottie-android 下载github 工程解压在 build\extension 路径找到bodymovin.zxp文件备用，再\build\player 找到lottie.js或者bodymovin.js 备用

（各版本路径不一定一样可以文件搜索找到下面文件即可）

3，安装bodymovin.zxp 此文件不能直接安装下载 ZXP 工具安装打开在file中找到 bodymovin.zxp文件进行安装

4，打开Ae 设置允许脚本写入文件和网络访问（我后期动画要生成json文件）

5，然后打开 “窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了

至此工具安装成功。

第二步：Adobe Afeter Effect 制作支持 Bodymovin的动画。

安装 Ae 新建一个合成项目制作一个简单动画

动画制作完成 “窗口”>“扩展”>“Bodymovin”菜单项设置好json文件输出位置，点击“Render”

桌面生成json动画文件

第三步：平台展示动画

1，android端

要求 1：as版本3.2.0级以上

2：gradle版本 3.2以上

3：android API版本 28及以上

4：lottie 要求支持androidX

{androidX 简介：简单地说就是新的库可以在不同的Android版本上使用。比如之前我们如果使用support为27.1.1的相关依赖库时。可能需要所有相关的support 库都为27.1.1。如果其中有bug的话，可能需要所有的都去升级，存在一个绑定关系，而且正式版的发布周期也很长。

通过AndroidX，我们可以看到实时实现的特性和bug修复。升级个别依赖，不需要对使用的所有其他库进行更新。这就和我们使用Github上的开源库一样的，出了问题，我们可以提出bug和意见。作者修复后，发布新版本，我们就可以直接替换使用了。更加的透明便捷。}

操作: 1，添加lottie 依赖

implementation 'com.airbnb.android:lottie:2.8.0'

2,项目构建 androidX （按提示后续操作即可）编译程序没问题进行下一步

3，导入动画文件

在工程main下建assets文件夹导入data.json文件

4，使用

java

lav_show = (LottieAnimationView) findViewById(R.id.lav_show);

LottieComposition.Factory.fromAssetFileName(this, "data1.json",
        new OnCompositionLoadedListener() {
            @Override public void onCompositionLoaded(@Nullable LottieComposition composition) {
                lav_show.setComposition(composition);

            }
        });

如果手机配置较低有卡顿可以开启硬件加速
lav_show.useHardwareAcceleration(true);

xml

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lav_show2"
    android:layout_width="wrap_content"
    android:layout_height="300dp"
    app:lottie_fileName="data1.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"
    />

运行即可得到结果

2，web端

1，导入js工具依赖文件lottie.js

2，导入json动画文件

3，使用

<!DOCTYPE html>
<html style="width: 100%;height: 100%">
<head>
    <script src="../static/js/lottie.js"></script>
</head>
<body style="background-color:#ccc; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">

<div style="width:100%;height:100%;background-color:#333;" id="bodymovin"></div>

<script>

    var animData = {
        wrapper: document.getElementById('bodymovin'),
        animType: 'html',
        loop: true,
        prerender: true,
        autoplay: true,
        path: '../static/json/data1.json'

    };
    var anim = bodymovin.loadAnimation(animData);
</script>
</body>
</html>

运行即可得到结果

最后可以看一下官方 github上的范例动画

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

android ，web等 使用 lottie 动画框架 流程

猜你喜欢

android ，web等使用 lottie 动画框架流程