一、简单介绍:
lottie是一个跨平台的动画库,通过AE(After Effects)制作动画,再通过AE插件Bodymovin导出Json文件,最终各个终端解析这个Json文件,还原动画。本文中我只介绍前端用到的库lottie-web。
lottie是一个不太占体积,还原度高,对于初学者友好的库。设计师制作好动画,并且利用Bodymovin插件导出Json文件。而前端直接引用lottie-web库即可,它默认的渲染方式是svg,原理就是用JS操作Svg API。但是前端完全不需要关心动画的过程,Json文件里有每一帧动画的信息,而库会帮我们执行每一帧。
注:开发拿到的动画文件基本上都一样,有data.json
和images文件夹,接下来说一下具体的用法和配置项
二、安装lottie-web插件
npm install lottie-web
三、使用
import lottie from 'lottie-web';
import animationData from "./loading.json"; //引入你的json动画数据
let animationDom = document.getElementById('animation'); //获取渲染的dom元素
if (animationDom) {
let fireworkLeft = lottie.loadAnimation({
container: animationDom,
renderer: "svg",
name: "fireworkLeft",
loop: true, //循环
autoplay: true, //自动播放
// assetsPath: "images/",
// animationData: animationData,//动画数据
animationData: JSON.parse(JSON.stringify(animationData))
})
fireworkLeft.addEventListener("complete", () => {
fireworkLeft.destroy();
});
}
属性的意思:
container: 当前需要渲染的DOM
renderer:渲染方式,默认是Svg,还有Html和Canvas方案。
loop: 是否循环播放
autoplay: 是否自动播放
animationData :AE导出的Json文件,使用import引入,如 import animationData from './xxx/data.json';
以上基本的用法就可以了,动画就可以预览了,如果出现图片加载不出来的情况,可以修改下图片路径或者手动替换json文件中的图片地址为base64的图片地址:如下
去掉图片路径,替换p为base64的图片,base64地址需要自己将图片转换一下,转换地址:在线图片转Base64编码
四、动画的播放与暂停,如果动画需要用户触发与暂停,需要有一个切换操作(toggle)
this.animation.play();
this.animation.pause();
五、动画执行过程中的钩子,可以对动画有一定的控制权
- complete
- loopComplete
- enterFrame
- segmentStart
- config_ready(初始配置完成)
- data_ready(所有动画数据加载完成)
- DOMLoaded(元素已添加到DOM节点)
- destroy
// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);
// 当前循环播放完成触发
anm.addEventListener('loopComplete', anmComplete);
// 播放一帧动画的时候触发
anm.addEventListener('enterFrame', enterFrame);