-
下载动画库:
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
相关推荐
前端爆冲4 分钟前
项目中无用export的检测方案小旋风0123410 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)热爱编程的小曾32 分钟前
sqli-labs靶场 less 8gongzemin43 分钟前
React 和 Vue3 在事件传递的区别Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue树上有只程序猿1 小时前
后端思维之高并发处理方案庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景