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格式

 基本使用

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()})                    #lottieId {  width: 300px;  height: 300px;}#lottieId2 {  width: 300px;  height: 300px;}

文章参考自

http://t.csdnimg.cn/fh4Ww

lottie-web，lottie动画使用详解_动画_jasmine 莉-华为开发者联盟HarmonyOS专区