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

来啦来啦~2024-11-26 16:37

下载动画库：
复制代码
```
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 文件的路径
    });
  }