LottieJS动画在项目上的基本使用

一、简单介绍：

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编码-BeJSON.com

四、动画的播放与暂停，如果动画需要用户触发与暂停，需要有一个切换操作（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);

Lottie原理与源码解析

 交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群：  856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！