Lottie，是一个支持web、 Android、iOS 以及 ReactNative、可以利用json实现动画效果的库。
1、安装Bodymovin
通过在AE上安装Bodymovin 插件，可以将 AE 中制作好的动画导出成一个 json 文件。
1、 下载bodymovin/bodymovin，在项目目录的“/build/extension”下找到“bodymovin.zxp”文件
2、 下载安装 zxp-installer（aescript+aeplugins zxp installer.exe）
3、 在zxp-installer中选择“File”>“Open”，打开“bodymovin.zxp”文件，会自动开始安装
4、 在AE中点击“窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。
2、android端使用
1、添加依赖
dependencies {
compile 'com.airbnb.android:lottie:2.0.0-beta4'
}
2、简单使用
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />
1、其中json文件放在 app/src/main/assets目录下
2、支持API14及以上的版本
android上的简单效果
3、web端使用
在bodymovin/bodymovin的项目下的“\build\player\bodymovin.js”，得到js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="bodymovin.js"></script>
</head>
<body>
<div id="animation" ></div>
<script>
bodymovin.loadAnimation({
path:'animation.json', //json文件路径
loop:true,
autoplay:true,
renderer:'canvas', //渲染方式，有"html"、"canvas"和"svg"三种
container:document.getElementById('animation')
});
</script>
</body>
</html>
web端使用
注意：
1、使用bodymovin.js时，不支持file协议，不能在本地运行，可以建一个本地服务器，运行（Tomcat安装及配置教程）；
2、运行ipconfig得到内网、
3、在使用AE导出json文件时，也可以同时生成一个测试环境的js文件，暂替bodymovin.js
不支持 flie
链接: http://pan.baidu.com/s/1gf65Ckz 密码: cfr3
参考：大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画、如何看待 Airbnb 新发布的 Lottie？、从json文件到炫酷动画-Lottie实现思路和源码分析、Lottie的使用及原理浅析
网友评论