Vue3+vite使用LottieFiles/lottie-web，阿里图标动效库

Vue3+vite使用LottieFiles/lottie-web，阿里图标动效库

本文将介绍Vue3中使用动效库内容。

动效下载

动效库可以在阿里图标下载也可以在这个LottieFiles官网下载，下载Json格式文件即可。

安装

需要安装lottie-web这个库，vue2好像需要安装另一个库，外国网站，文档不太友好，百度一下。

npm install lottie-web --save

在Vue3中使用lottie-web

代码

<template>
	<div ref='animation1'></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";//引入相关api
import lottie from "lottie-web";//引入动效库
import json001 from "~src/assets/json/json001.json";//引入下载的动效json
const animation1 = ref(null) //获取dom
onMounted(() => {//在这个生命周期渲染
        lottie.loadAnimation({
            container: animation1.value,//选择渲染dom
            renderer: "svg",//渲染格式
            loop: true,//循环播放
            autoplay: true//是否i自动播放,
            animationData: json001,//渲染动效json
        });
}
</script>

总结

这样就可以使用了，如果您遇到什么问题，可以随时联系我。
码字不易，点个赞。
这样就可以使用了，如果您遇到什么问题，可以随时联系我。
码字不易，点个赞。
这样就可以使用了，如果您遇到什么问题，可以随时联系我。
码字不易，点个赞。