100%硬核解决前端复杂动画的秘密武器！
哈喽！大家好！我是程序视点的小二哥。前端开发中，总会遇到这样一个困境：动画还原。对于前端开发工程师，有的是这样做的。
[*]照着设计动画模仿，猜测动画时长，手创建贝塞尔曲线……
[*]调整细节耗时耗力，效果还差强人意...
[*]好不容易实现了，还原度却达不到要求
在被UI设计折磨一顿后，小二哥找到了解决这个困境的方案。它就是今天的主角：Lottie
Lottie简介
Lottie 是Airbnb开源的一个 面向iOS、Android、React Native 的动画库，能分析 AE 导出的动画（需要用bodymovin导出为json格式），并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。
下面是Lottie提供的官方效果图。类似下面这种一段动画的播放，非常适合使用Lottie来做。
Lottie流程
我们先来看下整个流程简图。
设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。功能简单且强大。
至于Adobe Effect和Bodymovin插件的安装与使用...嗯嗯，这是设计师的事情，咱们就不操心啦。
Lottie使用入门
静态URL引入
调用loadAnimation
var params = {
container: element, // 容器节点
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // JSON文件路径
}
var anim = lottie.loadAnimation(params);vue中使用Lottie
依赖安装和使用
通过NPM安装vue-lottie
npm install --save vue-lottievue-lottie使用
<template>
<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
<p>Speed: x{{animationSpeed}}</p>
<input type="range" value="1" min="0" max="3" step="0.5"
v-on:change="onSpeedChange" v-model="animationSpeed">
<button v-on:click="stop">stop</button>
<button v-on:click="pause">pause</button>
<button v-on:click="play">play</button>
</template>参数配置
也就是上面的defaultOptions属性传递配置对象：
[*]container：在其上呈现动画的 dom 元素
[*]animationData：一个带有导出动画数据的对象。
[*]path：动画对象的相对路径。（animationData 和 path 是互斥的）
[*]loop：默认值为true。可传递需要循环的特定次数
[*]autoplay：true / false 它会在准备好后立即开始播放
[*]name：动画名称以供将来参考
[*]renderer: 'svg' / 'canvas' / 'html' 设置渲染器
Lottie动画监听
Lottie提供了用于监听动画执行情况的事件：
[*]complete
[*]loopComplete
[*]enterFrame
[*]segmentStart
[*]config_ready(初始配置完成)
[*]data_ready（所有动画数据加载完成）
[*]DOMLoaded（元素已添加到DOM节点）
[*]destroy
可使用addEventListener监听事件
// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);
// 当前循环播放完成触发
anm.addEventListener('loopComplete', anmComplete);
// 播放一帧动画的时候触发
anm.addEventListener('enterFrame', enterFrame);Lottie的更多详解，请查阅下方链接。
Lottie 地址：https://github.com/airbnb/lottie-android
Lottie 官网：https://airbnb.design/lottie/
关注同名微信公众号【程序视点】，了解更多有趣、好玩的项目吧~
来源:https://www.cnblogs.com/tanggoahead/p/17904274.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]