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 参数包含以下属性：

参数	类型	默认值	说明
animationData	object or array	null	Lottie动画数据
path	string	null	Lottie动画的JSON文件路径
renderer	string	'svg'	Lottie动画渲染方式，支持'canvas'和'svg'
loop	bool or number	true	是否循环播放动画
autoplay	bool	false	是否自动播放动画
name	string	null	Lottie动画的名称
assetsPath	string	null	Lottie动画资源文件夹的路径
rendererSettings	object	{}	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>

点击全文阅读