vue使用lottie-web实现web动画

范特西是只猫 2024-06-20 10:03:01 阅读 81

文章目录

1. 简介2. 优点3. 效果4. 安装使用5. lottie-web 常用方法6. Lottie-web 常用的事件

1. 简介

官方介绍:Lottie 是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web、ios、android、flutter和react native。 在web端,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制在我们的页面上.

在这里插入图片描述

找到我们想要的动画,然后点击后,弹出窗口,点击下载,格式为JSON。然后就能把这个动画的json数据用到我们自己的项目里边去了

2. 优点

动画由设计使用专业的动画制作工具AE来实现,使动画实现更加方便,且效果更好前端可以方便的调用动画,并对动画进行控制,减少前端动画工作量设计制作动画,前端展现动画,分工明确使用lottie方案,json文件大小比gif文件小很多,性能也会更好

3. 效果

请添加图片描述

4. 安装使用

npm 安装

npm install lottie-web

完整代码

<template> <div class="home"> <div class="body"> <div id="lottieId" /> </div> </div></template><script>import lottie from 'lottie-web'export default { name: 'Demo', data() { return{ } }, mounted() { this.animation = lottie.loadAnimation({ container: document.getElementById('lottieId'), renderer: 'svg', loop: true, autoplay: true, animationData: require('@/assets/lottie/by.json'), }) },}</script><style scoped lang="scss">.home { .body { width: 890px; height: 500px; border: #ff3366 solid 10px; box-sizing: border-box; box-sizing: border-box; #lottieId { padding: 40px; box-sizing: border-box; width: 100%; height: 100%; } }}</style>

5. lottie-web 常用方法

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(); // 删除该动画,移除相应的元素标签等。

6. Lottie-web 常用的事件

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。