一、简单介绍:

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编码

json动画android json动画怎么用_json动画android

四、动画的播放与暂停,如果动画需要用户触发与暂停,需要有一个切换操作(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原理与源码解析