vue3+vite中使用Lottie动画

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()
    }
});

 

动画生成！！！