前言
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"
/>
运行即可得到结果
<iframe height=500 width=500 src="https://github.com/airbnb/lottie-android/blob/master/gifs/Community%202_3.gif">
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上的范例动画