vue3 实现 json文件(lottie) 动画效果

npm install lottie-web

// 示例
<template>
  <div class="index">
    <div class="zan"></div>
  </div>
</template>

<script setup name="index">
import { onMounted, nextTick } from "vue";
import dataJson from "../assets/data.json";   //动画效果 json文件
import lottie from "lottie-web";

onMounted(() => {
  nextTick(() => {
    jsonAnimation(document.getElementsByClassName("zan")[0], dataJson);
  });
});
//动画效果
const jsonAnimation = (dom, jsonFile) => {
  lottie.loadAnimation({
    container: dom, //挂载的dom元素
    renderer: "svg", //渲染器
    loop: true, //是否循环
    autoplay: true, //是否自动播放
    animationData: jsonFile, //json文件
  });
};
</script>

<style scoped lang="less">
.index {
  width: 100vw;
  height: 100vh;
  background: skyblue;
  .zan {
    width: 200px;
    height: 200px;
  }
}
</style>