-
下载动画库:
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
相关推荐
sunbyte3 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据一夜枫林3 小时前
uniapp自定义拖拽排列IT瘾君5 小时前
JavaWeb:Html&Css264玫瑰资源库6 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)喝拿铁写前端6 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题王景程6 小时前
如何测试短信接口安冬的码畜日常7 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)