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 文件的路径
       });
     }