-
下载动画库:
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
相关推荐
光影少年7 分钟前
vue3.0性能提升主要通过那几方面体现的?小磊哥er20 分钟前
【前端工程化】前端开发中的这些设计规范你知道吗江城开朗的豌豆20 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?皮皮灬虾25 分钟前
微信小程序下单页—地址列表页—新增地址页 页面交互Jinxiansen021128 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制前端 贾公子8 小时前
在移动端使用 Tailwind CSS (uniapp)