lottie-前端实现AE动效
在前端页面上为了实现动画效果，可以用CSS3自己实现，可以让UI小姐姐给你GIF动图，也可以直接animate.css等等吧，可以实现的方式有不少，但如果说偏差那肯定是会有的，在呈现上也会有点不太自然，今天介绍一个神器Lottie。（刚接触到这个东西，那兴趣是真的十分大，真的是对前端很友好。）
Lottie背景介绍
Lottie是可应用于Android, iOS, Web和Windows的库，通过Bodymovin解析AE动画，并导出可在移动端和web端渲染动画的json文件。换言之，设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。
对于前端来说从UI小姐姐那里拿到的是这样一个文件，若动画里导入了外部图片，则会在images中存放JSON中引用的图片。
前端使用Lottie
1.静态URL
https://cdnjs.com/libraries/lottie-web
2.NPM
npm install lottie-web
调用loadAnimation
3.vue-lottie（在vue中使用lottie）
import lottie from '../lib/lottie';
import * as favAnmData from '../../raw/fav.json';
export default {
props: {
options: {
type: Object,
required: true
},
height: Number,
width: Number,
},
data () {
return {
style: {
width: this.width ? `${this.width}px` : '100%',
height: this.height ? `${this.height}px` : '100%',
overflow: 'hidden',
margin: '0 auto'
}
}
},
mounted () {
this.anim = lottie.loadAnimation({
container: this.$refs.lavContainer,
renderer: 'svg',
loop: this.options.loop !== false,
autoplay: this.options.autoplay !== false,
animationData: favAnmData,
assetsPath: this.options.assetsPath,
rendererSettings: this.options.rendererSettings
}
);
this.$emit('animCreated', this.anim)
}
}
loadAnimation参数
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);
可以控制动画播放速度和进度：
可使用anm.pause和anm.play暂停和播放动画，调用anm.stop则会停止动画播放并回到动画第一帧的画面。
使用anm.setSpeed(speed)可调节动画速度，而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定帧数，也可结合anm.totalFrames控制进度百分比，比如可传anm.totalFrames - 1跳到最后一帧，这样的好处是可以把相关联的JSON文件合并，通过anm.goToAndPlay控制动画状态的切换。
anm.goToAndStop(anm.totalFrames - 1, 1);
图片路径处理
SON文件里assets设置了对图片的引用：
若想统一修改静态资源路径或者设置成绝对路径，可在调用loadAnimation时传入assetsPath参数：
lottie.loadAnimation({
container: element,
renderer: 'svg',
path: 'data.json',
assetsPath: 'URL' // 静态资源绝对路径
});
这篇随笔主要借鉴了这个小姐姐的文章https://segmentfault.com/a/1190000018577416
写的是真的真的真的很好，内容覆盖很全。
lottie文档地址：https://juejin.cn/post/6844903661760413704
