什么是 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>

文章参考自

http://t.csdnimg.cn/fh4Ww

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