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 文件的路径
        });
      }
相关推荐
故事与他6454 分钟前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
莫的感情38 分钟前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥42 分钟前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python1 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_1 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
武天1 小时前
Vue项目中有封装过axios吗?怎么封装的?
vue.js
Github项目推荐1 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊1 小时前
C语言bsearch的使用
java·c语言·前端
云枫晖1 小时前
Webapck系列-初识Webpack
前端·javascript
慧一居士1 小时前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端