-
下载动画库:
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
相关推荐
雨过天晴而后无语9 分钟前
Windchill10+html使用Lightbox轻量化wizard的配置Yeats_Liao12 分钟前
Go Web 编程快速入门 12 - 微服务架构:服务发现、负载均衡与分布式系统旺仔小拳头..15 分钟前
HTML——表单与表格xu_duo_i17 分钟前
vue2+elementUI后端返回二进制流,前端下载实现慧一居士18 分钟前
在Vue项目中平滑地引入HTML文件我的200918 分钟前
HTML常用特殊字符开发者如是说31 分钟前
我用 Compose 写了一个 i18n 多语言管理工具微信api接口介绍38 分钟前
微信个人发消息api阿明Drift41 分钟前
从炫酷粒子星云学 Three.js:深度解析一个 15 万粒子的 GPU 动画系统披着羊皮不是狼41 分钟前
HTTP 与 API 入门:理解前后端交互原理