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