vue3前端加载动画 lottie-web 的简单使用案例

什么是 Lottie
Lottie 是 Airbnb 发布的一款开源动画库，它适用于 Android、iOS、Web 和 Windows 的库。它提供了一套从设计师使用 AE（Adobe After Effects）到各端开发者实现动画的工具流。

UED 提供动画 json 文件即可，开发者就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。

Lottie-Web 是 Lottie 在 web 端的技术方案。

Lottie-Web 提供了 SVG、Canvas 和 HTML 三种渲染模式，一般使用 Svg 或 Canvas 即可。

1、SVG 渲染器支持的特性最多，也是使用最多的渲染方式。并且 SVG 是可伸缩的，任何分辨率下不会失真;
2、Canvas 渲染器就是根据动画的数据将每一帧的对象不断重绘出来;
3、HTML 渲染器受限于其功能，支持的特性最少，只能做一些很简单的图形或者文字，也不支持滤镜效果。

安装依赖

npm install lottie-web --save

从官网下载了一个json文件示例

LottieFiles: Download Free lightweight animations for website & apps.

也可以下载gif格式

基本使用

<script setup>
import { ref, onMounted } from 'vue'
import lottie from 'lottie-web'

const lottieInstance = ref(null)
const lottieInstance2 = ref(null)

let imgName = 'Animation - 1712559820721.json'
const getImg = () => {
    return new URL(`/src/assets/${imgName}`, import.meta.url).href;
}
const init = () => {
  // 读取动画容器
  const lottieContainer = document.getElementById('lottieId')
  if (!lottieContainer) return;
  // 实例化
  lottieInstance.value = lottie.loadAnimation({
    // UED 提供的 动画的 json 文件
    path: 'https://static-cdn.canyuegongzi.xyz/lf20/lf20_jv0xz0qi.json',
    // 渲染方式
    renderer: "svg",
    // 是否循环
    loop: true,
    autoplay: true, // 自动播放
    container: lottieContainer,  // 用于渲染的容器
  });

  // 初始化第二个动画
  const lottieContainer2 = document.getElementById('lottieId2')
  if (!lottieContainer2) return;
  lottieInstance2.value = lottie.loadAnimation({
    path: getImg(),
    // path: './src/assets/Animation - 1712559820721.json',
    renderer: "svg",
    loop: true,
    autoplay: true,
    container: lottieContainer2
  });
}

const onStart = () => {
  lottieInstance.value?.play();
  lottieInstance2.value?.play(); 
}

onMounted(() => {
  init()
  onStart()
})
</script>

<template>

  <div class="card">
    <img src="../assets/Animation - 1712559725257.gif" />
    <img src="../assets/Animation - 1712559820721.gif" />
  </div>
  <div style="display: flex;">
    <div id="lottieId"></div>
    <div id="lottieId2"></div>
  </div>

</template>

<style scoped>

#lottieId {
  width: 300px;
  height: 300px;
}

#lottieId2 {
  width: 300px;
  height: 300px;
}
</style>