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>

文章参考自

http://t.csdnimg.cn/fh4Ww

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