Web端使用Lottie渲染AE导出的json动画-lottie-web-demo

示例

Lottie是Airbnb开发的一种轻量级的JavaScript库，它能够在Web、iOS和Android平台上呈现高质量、动态的矢量动画。Lottie使得在应用中使用复杂的矢量动画变得更加容易，并且在不同平台上能够实现更高的视觉一致性。而lottie-web是Lottie的Web版本，使用它可以在Web页面中展示高品质、流畅的动态矢量动画。

与css动画、gif、帧动画的比较

安装

npm i lottie-web

Vue中使用

创建LottieAni文件

<template>
  <div ref="lottieBox"></div>
</template>

<script setup>
  import lottie from "lottie-web";
  import { onMounted, ref, defineProps } from "vue";
  const props = defineProps({
    src: {
      type: Object,
      default: ()=>{},
    },
    path: {
      type: String,
      default: "",
    },
    loop: {
      type: Boolean,
      default: true,
    },
    autoplay: {
      type: Boolean,
      default: true,
    },
  });
  const lottieBox = ref(null);
  onMounted(() => {
    if (lottieBox.value) {
      const animation = lottie.loadAnimation({
        container: lottieBox.value,
        renderer: "svg", // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
        loop: props.loop, // 循环播放，默认：true
        autoplay: props.autoplay, // 自动播放 ，默认true
        path: props.path,//网络路径
        animationData: Object.keys(props.src).length == 0 ? "" : props.src,//本地路径，优先级更高  AE动画使用bodymovie导出为json数据
      });
    }
  });
</script>

API文档

基本用法

创建
const animation = lottie.loadAnimation({
  container: document.getElementById('domId'), // 绑定dom节点
  renderer: 'svg', // 渲染方式:svg、canvas
  loop: true, // 是否循环播放，默认：false
  autoplay: true, // 是否自动播放, 默认true
  animationData: // AE动画使用bodymovie导出为json数据
})

常用方法
animation.play(); // 播放，从当前帧开始播放

animation.stop(); // 停止，并回到第0帧

animation.pause(); // 暂停，并保持当前帧

animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放

animation.goToAndStop(30, true); // 跳转到第30帧并停止

animation.goToAndPlay(300); // 跳转到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段

animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

animation.setSpeed(speed); // 设置播放速度，speed为1表示正常速度

animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放

animation.destroy(); // 删除该动画，移除相应的元素标签等。

常用的事件
animation.addEventListener('data_ready', () => {}) // 动画数据加载完毕
animation.addEventListener('config_ready', () => {}) // 完成初始配置后
animation.addEventListener('data_failed', () => {}) // 加载动画数据失败
animation.addEventListener('loaded_images', () => {}) // 所有图片加载成功或者失败
animation.addEventListener('DOMLoaded', () => {}) // 将元素添加到DOM后

Lottie-web 提供了丰富的 API，以便我们控制动画的播放、暂停、重置、改变速度等操作。下面列出一些常用的 API：

• **lottie.loadAnimation**：加载动画文件并返回一个动画实例。
• animation.play: 播放动画。
• animation.stop: 停止动画。
• **animation.setSpeed**：设置动画的播放速度。
• **animation.setDirection**：设置动画的播放方向。
• **animation.goToAndStop**：跳转到指定时间点或帧，并暂停。
• **animation.destroy**：销毁动画实例。

**

options

** 参数包含以下属性：
参数类型默认值说明animationDataobject or arraynullLottie动画数据pathstringnullLottie动画的JSON文件路径rendererstring'svg'Lottie动画渲染方式，支持'canvas'和'svg'loopbool or numbertrue是否循环播放动画autoplayboolfalse是否自动播放动画namestringnullLottie动画的名称assetsPathstringnullLottie动画资源文件夹的路径rendererSettingsobject{}Lottie动画渲染的一些配置
在

options

参数中，

animationData

和

path

必须设置其中之一。

animationData

可以直接传入Lottie动画数据，而

path

则是Lottie动画的JSON文件路径，可以通过require或import语句导入

Lottie的免费资源

LottieFiles: Download Free lightweight animations for website & apps.
Lottie的动画是通过AE制作好了动画后，再使用bodymovie导出为json格式

JSON动画配置文件

ammNoticeData.json

{"v":"5.6.1","fr":25,"ip":0,"op":150,"w":896,"h":480,"nm":"插图整","ddd":0,"assets":[{"id":"image_0","w":132,"h":58,"u":"","p":"data:image/png;base64,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","e":0},{"id":"image_1","w":33,"h":40,"u":"","p":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAoCAYAAABw65OnAAAACXBIWXMAAAABAAAAAQBPJcTWAAAAJHpUWHRDcmVhdG9yAAAImXNMyU9KVXBMK0ktUnBNS0tNLikGAEF6Bs5qehXFAAAFN0lEQVRYhe2YW2hc1RrHf18U8aiZPchMjCaZjqHVtk4xLajgeIkIQip2olU7BzlV0RdlsFFIQXywhfrQjqXWF5m8pPUlYxGbKiQIQiNM4jWnPXQicjxwmp3E+2X21PTN/n3Ye3rJTNpcxjc/WLOZxdpr/dZ/fd+31l7wt/lmS3lJUhh4EugGOoAwUAKOAx8DI8BxMyvVB7MaoFvSb4VCQalUSu3t7YpEIlq/fr0ymYwmJyclSSXPk6RjkvolddcTYN/k5KRSqZQikci8JZfL6cTEhO5/8CH1vPyKxr4Yl6T/LxtGUv/Q0NDZmV+qDAwMqK//gK5fnTjT0nGbnt3+sqa++06SXp3b94J8QtK+4eHhnq1bty4Y2nEcxsfHebbnJT79zwnsiisVW7HC8vtfp7X5uofNbLDStmEBANtc1+3JZDILBgDwPI9sNstLzz+HBGZmMz/8SO/eNwX0B859aQhJcc/z3uju7qZcLi8KAiCfz7P2plWEQo0ISaDPT0zYgSNDYaBnQRDAvmw2y9TU1KIBwFcjn8+zZdNDBCtvktT/wRDAtooa80JIesp13e5cLrckgIqNjY3xQOe9GGZm/u/Mjz/rs+LXYfwcc1ElXs1ms8sCABgdHeWWm1YhBID8h3305Tj4Ca82hKRO13Xj+Xx+2RCe56EzfxBqbPQrzC8ffXEMoHNeCOCpeqhQsampKdpuuN4fXQiMmZ9+0anZ03FJ4SoISXHgyeHh4bpBeJ5H6JqrJSTMKrnJyqdPA1RDAJ1DQ0N4nlc3iHK5TKix0XwDC5Zk5udfAeK1IFL1VAEgFApRPvV74Jl+nWGUZ08DODWVGB0drSvEBWaGIFgav+oCCEkdruuGl5qc5jPHcSjP/m4XblVmoauuAvDmKhEvFot1BQBoa2tj+tvvdW74c94J1SHaUW8Ix3Gwhssoz85aJUcEJLRErwU4WaVEPaMCIJFI8NU33/j5QRDsZAJoiUQwsyoIZ3p6uu4QE//9H/7GAdbgP1evaAX/TFq1HOFSqb5n066uLj4ZPxb8M0lgNNiaFTGAyVoQdTXHcUgmk3z673HOJgkDkO645WaAw385RFdXFx8eHaF8ajbwx7OeabevXQ3+50EVxGQsFqsbRDqd5sOjHyP5pyqCjH17Yg0t0chxMztZC6IUCoXqAhCLxYjFb+TQkfcVOKVhJgGb77sH4GCl7VyIk4lEoi4Qvb29HBo8QjB5APlx4SsBzHvaHlm3bt2yAWKxGMm77+bQ4cFgnwDDDIzN93fS2hQ9UFkKgMvPf9nMjksqOY4TXk7S6u3t5Z1332NqeoaGK//hSxHo8cITjwPsPL99reg4smXLliUDpNNp7rzrLvbu3y8M+WcHPy63/euftF7XdIEK80Ec2Lhx45IAYrEY27dv5+HNj0rnxSMGrc3N9vQjKZijQk0IMxtJJpMj6XR60QCDg4Pk+vqYnp4x/JA8u0/0vbaD0DVX75yrQk2IwHbu2rWLheaMCkA+n6cvl6vko8qObS8+8zRrV60cNLMdi5qZpB7XdbVhw4aLfn2nUim5rqvdu3f7ddGomlpb1dy+UjesSWjvW7nKtUD40qPWBtnhuq4ymUzNwQcGBlQqlbRp06Yz0Wj0HERLq5rbV57pO/h2BSC+JIDzQOKSjnqep0KhoEKhINd1VSqVtGfPnqr7imhTk7offUwnJr6SpMMLUWDBd1ZBZx3ArQR3VcViMVwsFhkbG0MSbW1tJJNJksnkSWCHmR28WJ+LhpgHrAO4N4AD8IBBMxtZTD9/AhBtiN86eFA3AAAAAElFTkSuQmCC","e":0},{"id":"image_2","w":33,"h":40,"u":"","p":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAoCAYAAABw65OnAAAACXBIWXMAAAABAAAAAQBPJcTWAAAAJHpUWHRDcmVhdG9yAAAImXNMyU9KVXBMK0ktUnBNS0tNLikGAEF6Bs5qehXFAAACt0lEQVRYhe2Y73GjQAzF310FooKoA9OBVYI7MB2YDthUkHQAqcCkArgKIBVAB7tUoPtgNpPY/LONc1/uzXg8FmB+SELsA/iv+0UADgAKABaA9t8FAANA+n0eJgHQiIgej0e11qqqqrVW0zRVZtYeSgFUAI4AdmsCJMysRVHolJIkUb9fmqYqIgqgAbC/GyAMw88rn1Mcx7rb7T5/N03js5T8CIAvz3nWvoDE1wJEzKxN0ywG8CqKQkXkW6xpGg2CwALgpQAMoLkFwIuILnrIGKMA0qUQWZIkNwP4E8Zx/C1mrfXZmL2NmZnvAlA9lSQMw4t4FEWLeqPIsuxuCGutArho6jzPFafh9tgseA01dg9nf09AGGPMXKYWa7PZoK7rbzEiAjPTFMR2u92uBhEEAbquu4gzM8YgRESYmVeDGNMURLTbrfq8mdQYxGbNUtwCQUQUhmG46onatsXT09NiiNUBAMA5B6LL4WitHYR4SEPWdY2hi+u67mcgxgD8tn8K4ZyDc85NDavVlOc5ROQi3k/Q+kcgPj4+MHTLv7+/A8Cfh0OUZQlmxlCJy7IEgHIIwjnnVoPIsgxRFF3E27ZFXdftGETbtu0qAG3b4u3tbaoU5dixu6/L9HtkjNEoikbXFwBGpyIT0d0Afmk/tEBO03R2RQUATVVVd0Hs93s9HA6D2/oszDqxV2PMzQBFUSgzDxqlPgvVHAAACBFd5ba8fBmGvOoX98VLIACguDYb1loNw1DHfMp+v1ecXhssFgdBYJc6rzmA3nEtKsO54iUetKoqZeY5gAZXlOFchpl1yARVVaXGGCUifXl5eRiAFwPIiEhFREVEmVmJSJMkGWxg78ZxmgeTAL+uhCGcptwGp1dGwswkIp+jues65HmOsiwdgGcAr3N/ei3EkML+4x8QHYAcE8+Fc/0FO1Qn1fLp8BwAAAAASUVORK5CYII=","e":0}],"layers":[{"ddd":0,"ind":1,"ty":2,"nm":"50%.png","cl":"png","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[412,29,0],"ix":2},"a":{"a":0,"k":[66,29,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":38,"s":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":43,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":48,"s":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":53,"s":[100,100,100]},{"t":58,"s":[80,80,100]}],"ix":6}},"ao":0,"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":2,"nm":"黑 3","refId":"image_1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":79.577,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":89.639,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":139.939,"s":[100]},{"t":150,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":79.577,"s":[729,151,0],"to":[-2.167,-19.5,0],"ti":[22.595,7.636,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":89.639,"s":[716,34,0],"to":[-36.235,-12.245,0],"ti":[6.194,-0.817,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":139.939,"s":[139,28,0],"to":[-9.763,1.287,0],"ti":[0.167,-31.167,0]},{"t":150,"s":[138,215,0]}],"ix":2},"a":{"a":0,"k":[16.5,20,0],"ix":1},"s":{"a":0,"k":[80,80,100],"ix":6}},"ao":0,"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":2,"nm":"白 2","refId":"image_2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":60.498,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":70.559,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":120.859,"s":[100]},{"t":130.9208984375,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":60.498,"s":[729,151,0],"to":[-2.167,-19.5,0],"ti":[22.595,7.636,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":70.559,"s":[716,34,0],"to":[-36.235,-12.245,0],"ti":[6.194,-0.817,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":120.859,"s":[139,28,0],"to":[-9.763,1.287,0],"ti":[0.167,-31.167,0]},{"t":130.9208984375,"s":[138,215,0]}],"ix":2},"a":{"a":0,"k":[16.5,20,0],"ix":1},"s":{"a":0,"k":[80,80,100],"ix":6}},"ao":0,"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":2,"nm":"黑 2","refId":"image_1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":35,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":45.061,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":95.361,"s":[100]},{"t":105.4228515625,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":35,"s":[729,151,0],"to":[-2.167,-19.5,0],"ti":[22.595,7.636,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":45.061,"s":[716,34,0],"to":[-36.235,-12.245,0],"ti":[6.194,-0.817,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":95.361,"s":[139,28,0],"to":[-9.763,1.287,0],"ti":[0.167,-31.167,0]},{"t":105.4228515625,"s":[138,215,0]}],"ix":2},"a":{"a":0,"k":[16.5,20,0],"ix":1},"s":{"a":0,"k":[80,80,100],"ix":6}},"ao":0,"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":2,"nm":"白","refId":"image_2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":36.385,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":52.923,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":69.462,"s":[100]},{"t":86,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":36.385,"s":[260,328,0],"to":[18,0,0],"ti":[-37.667,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":52.923,"s":[368,328,0],"to":[37.667,0,0],"ti":[-33.167,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":69.462,"s":[486,328,0],"to":[33.167,0,0],"ti":[-13.5,0,0]},{"t":86,"s":[567,328,0]}],"ix":2},"a":{"a":0,"k":[16.5,20,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":2,"nm":"黑","refId":"image_1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":16.538,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":33.078,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":49.615,"s":[100]},{"t":66.154296875,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":16.538,"s":[260,328,0],"to":[18,0,0],"ti":[-37.667,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":33.078,"s":[368,328,0],"to":[37.667,0,0],"ti":[-33.167,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":49.615,"s":[486,328,0],"to":[33.167,0,0],"ti":[-13.5,0,0]},{"t":66.154296875,"s":[567,328,0]}],"ix":2},"a":{"a":0,"k":[16.5,20,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":2,"nm":"白","refId":"image_2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":16.538,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":33.078,"s":[100]},{"t":49.615234375,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[260,328,0],"to":[18,0,0],"ti":[-37.667,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":16.538,"s":[368,328,0],"to":[37.667,0,0],"ti":[-33.167,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":33.078,"s":[486,328,0],"to":[33.167,0,0],"ti":[-13.5,0,0]},{"t":49.615234375,"s":[567,328,0]}],"ix":2},"a":{"a":0,"k":[16.5,20,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":150,"st":0,"bm":0}],"markers":[]}

使用

<template>
 <LottieAni :src="ammNoticeData" />
</template>

<script setup>
  import { ref, reactive, onMounted, computed } from 'vue';
  
  import ammNoticeData from "@/assets/json/ammNoticeData.json";
  import LottieAni from "@/components/LottieAni";

</script>

<style lang="less" scoped>

</style>