Lottie通过读取json文件信息实现动画效果
官方文档 Lottie官网
lottie库有众多动画
选择下载Lottie JSON到项目中
安装Lottie包
pnpm add lottie-web
模板创建
<template> <div class="bg"> <div id="canvas" class="canvas" ref="containerRef"></div> </div> </template>
引入lottie-web以及动画json文件
import lottie from 'lottie-web';
import transformJson from "@/assets/json/playLottie.json"
js
const containerRef = ref<HTMLDivElement | null>(null); onMounted(() => { const container = containerRef.value; if (container) { let animations = lottie.loadAnimation({ container: document.getElementById("canvas"), // the dom element that will contain the animation renderer: 'svg', loop: true, autoplay: true, animationData: transformJson }); animations.play() } });文章来源：https://www.toymoban.com/news/detail-721924.html
动画生成！！！ 文章来源地址https://www.toymoban.com/news/detail-721924.html
到了这里，关于vue3+vite中使用Lottie动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
