<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-01-16 13:49:37
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-01-16 13:53:47
 * @FilePath: \General-AI-Platform-Web-Client\src\components\Animate\src\animateDevice.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref, onMounted } from "vue"; //引入相关api
import lottie from "lottie-web"; //引入动效库
import json01 from "@/assets/animate/device/01.json"; //引入下载的动效json

defineOptions({
  name: "AnimateDevice"
});

const animation1 = ref(null); //获取dom
function initAnimate() {
  console.log(lottie, "lottie");
  lottie.loadAnimation({
    container: animation1.value, //选择渲染dom
    renderer: "svg", //渲染格式
    loop: true, //循环播放
    autoplay: true, //是否i自动播放,
    animationData: json01 //渲染动效json
  });
}
onMounted(() => {
  initAnimate();
});
</script>

<template>
  <div style="width: 100px">
    <div ref="animation1" />
  </div>
</template>
