vue项目实现动效交互---lottie动画库

  1. 下载动画库:

    复制代码
    npm i lottie
  2. 在使用页面引入,注册

    复制代码
    <script>
    import dropboxDxJson from "@/assets/gif/drop-box-dx.json"; // 导入动效 JSON 文件
    import lottie from "lottie-web";
    export default {
      components: {
        lottie,
      },
    .....
    </script>
  3. 在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>
  4. 动画实例化

    复制代码
      mounted() {
        this.lottie = lottie.loadAnimation({
          container: document.querySelector(".dx-drop-static-box"), // 动画容器
          renderer: "svg", // 渲染器类型,可以选择 'svg' 或 'html'
          loop: true, // 是否循环播放
          autoplay: true, // 是否自动播放
          animationData: dropboxDxJson, // JSON 文件的路径
        });
      }
相关推荐
有一个好名字11 分钟前
Agent Loop —— 一切从那个 while 循环开始
前端·javascript·chrome
一天睡25小时13 分钟前
Claude Code 指令入门教程
前端
yingyima30 分钟前
正则表达式实战:从日志中精准提取关键字段
前端
TeamDev38 分钟前
如何在 DotNetBrowser 中使用本地 AI 模型
前端·后端·.net
谢尔登1 小时前
10_从 React Hooks 本质看 useState
前端·ubuntu·react.js
辰同学ovo1 小时前
从全局登录状态管理学习 Redux
前端·javascript·学习·react.js
陈随易1 小时前
2年没用Nodejs了,Bun很香
前端·后端·程序员
donecoding2 小时前
Corepack 完全解析:从懵到懂,包管理器自由了
前端·node.js·前端工程化
yqcoder2 小时前
端经典面试题:为什么 0.1 + 0.2 !== 0.3?
前端·css
ZC跨境爬虫2 小时前
跟着 MDN 学 HTML day_12:(HTML网页图片嵌入)
前端·javascript·css·ui·html