-
下载动画库:
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
相关推荐
zhensherlock5 分钟前
Protocol Launcher 系列:Trello 看板管理的协议自动化zhuà!8 分钟前
element的el-form提交校验没反应问题龙猫里的小梅啊23 分钟前
CSS(一)CSS基础语法与样式引入小码哥_常25 分钟前
从0到1,开启Android音视频开发之旅渔舟小调28 分钟前
P19 | 前端加密通信层 pikachuNetwork.js 完整实现qq_12084093711 小时前
Three.js 工程向:Draw Call 预算治理与渲染批处理实践旷世奇才李先生2 小时前
Vue3\+Vite\+Pinia实战:企业级后台管理系统完整实现(附源码)不会聊天真君6474 小时前
JavaScript基础语法(Web前端开发笔记第三期)IT_陈寒4 小时前
SpringBoot自动配置这破玩意儿又坑我一次