LottieJS动画的安装与使⽤
【⽬录】
LottieJS动画技术原理
LottieJS的特点
LottieJS动画的安装和使⽤
Lottie动画技术原理
Lottie动画是将AE⽂件导出json⽂件，然后使⽤LottieJS进⾏动画的控制，⽬前动画的交互性不是很强，所以先⽤这种技术。LottieJS的特点
待更新
LottieJS动画的安装和使⽤
1. ⾸先需要安装AE软件，这⾥根据UE安装了CC 2017版本（这个去搜安装包安装破解不再赘述）
2. 其次下载p这个AE扩展插件，⽤于AE动画的json⽂件的导出
3. 其次下载安装AE扩展插件的⼯具包，这个⼯具包aescript + aeplugins 可以安装很多的AE扩展插件
4.
5. 在aescript + aeplugins 安p，安装好以后会是这个样⼦
6. 打开AE编辑 > ⾸选项 > 常规 界⾯勾选允许脚本写⼊⽂件和访问⽹络 ，点击确定
7. 在AE中点击窗⼝ > 扩展 中就可以看到添加的插件
8. 下⼀步就是准备动画了，⼀个aep⽂件加上素材⽂件，打开之后在窗⼝ > 扩展 中打开bodymovin窗⼝，可以看到下⾯的窗⼝
ps：以前有遇到过导出卡住的情况，后⾯考虑到可能是插件和AE版本不匹配的原因，如果你有这种原因那么你就去换⼀个p 重新安装⼀遍，应该会解决这个问题。
9. 可以看到导出的⽂件有data.json和images⽂件，images⽂件中的图⽚都是有描边的情况，但是我们的动画正常情况下是不需要描边
的，所以需要把图⽚单独导出来进⾏⼿动同名替换。
10. 下⾯我们有了资源⽂件我们就要把这个运⽤到html中了，使⽤的时候发现如果是引⽤data.json是不能本地使⽤的，必须要使⽤http服
务打开才能请求到，否则会报这个错误，所以⼀定记得起服务
1. 下⾯就是代码，下⾯的代码写完这个动画就可以播放了
<!--第⼀步先引⽤lottieJS-->
<script src="./lottie.js"></script>
<!--第⼆步动画的容器设置好-->
js文字动画特效
<div id="animation"></div>
<!--第三步创建动画对象-->
<script>
var b = lottie.loadAnimation({
container: ElementById('animation'), // the dom element that will contain the animation        renderer: 'svg', //渲染出来的是什么格式
loop: true,  //循环播放
autoplay: true, //⾃动播放
path: 'data.json' // the path to the animation json
});
</script>
复制代码
@version1.0——2018.5.24——创建Lottie动画的安装与使⽤
©burning_韵七七

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。