-
下载动画库:
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
相关推荐
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicomgnip7 小时前
Jst执行上下文栈和变量对象excel7 小时前
🐣 最简单的卷积与激活函数指南(带示例)醉方休8 小时前
npm/pnpm软链接的优点和使用场景拉不动的猪8 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案How_doyou_do8 小时前
数据传输优化-异步不阻塞处理增强首屏体验奇舞精选8 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南奇舞精选8 小时前
Nano Banana 如何为前端注入 AI 控制力一支鱼8 小时前
基于 Node.js 的短视频制作神器 ——FFCreatorDT——8 小时前
前端登录鉴权详解