-
下载动画库:
npm i lottie
-
在使用页面引入,注册
<script> import dropboxDxJson from "@/assets/gif/drop-box-dx.json"; // 导入动效 JSON 文件 import lottie from "lottie-web"; export default { components: { lottie, }, ..... </script>
-
在html预留一个动画的位置
<template> <div class="dx-drop-static-box" ></div> </template> <style scoped> .dx-drop-static-box { position: absolute; top: -1rem; left: 0; width: 100%; height: 100%; z-index: 99; } </style>
-
动画实例化
mounted() { this.lottie = lottie.loadAnimation({ container: document.querySelector(".dx-drop-static-box"), // 动画容器 renderer: "svg", // 渲染器类型,可以选择 'svg' 或 'html' loop: true, // 是否循环播放 autoplay: true, // 是否自动播放 animationData: dropboxDxJson, // JSON 文件的路径 }); }
vue项目实现动效交互---lottie动画库
来啦来啦~2024-11-26 16:37
相关推荐
故事与他6454 分钟前
XSS_and_Mysql_file靶场攻略莫的感情38 分钟前
下载按钮点击一次却下载两个文件问题一个很帅的帅哥42 分钟前
JavaScript事件循环小宁爱Python1 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理fox_1 小时前
深入理解React中的不可变性:原理、价值与实践武天1 小时前
Vue项目中有封装过axios吗?怎么封装的?Github项目推荐1 小时前
你的错误处理一团糟-是时候修复它了-🛠️Code小翊1 小时前
C语言bsearch的使用云枫晖1 小时前
Webapck系列-初识Webpack慧一居士1 小时前
HTML5 功能介绍,使用场景,对应功能点完整使用示例