在uni-app中使用lottie-web来展示Lottie动画

风早爽太2025-09-14 18:18

效果图

1. 安装并引入lottie-web库

首先，你需要在uni-app项目中安装lottie-web库。你可以通过npm或yarn进行安装：

javascript 复制代码

npm install lottie-web

或者

javascript 复制代码

yarn add lottie-web

2. 准备Lottie动画的JSON文件并添加到项目中

将Lottie动画的JSON文件添加到你的uni-app项目的静态资源目录下，比如：

3. 使用lottie-web的API来加载并播放Lottie动画

在uni-app中创建一个容器来承载Lottie动画，给容器设定一个id，然后将Lottie动画的JSON文件路径传递给lottie-web的loadAnimation方法。以下是一个示例代码：

javascript 复制代码

<template>
	<view class="content">
		<view id="lottieContainer" style="width: 100vw; height: 100vh; position: absolute;"></view>

		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>


<script>
	import Lottie from 'lottie-web'

	export default {
		data() {
			return {
				title: 'uni-app'
			}
		},
		mounted() {
			Lottie.loadAnimation({
				container: document.getElementById('lottieContainer'), // 通过设置的"id"获取到动画的容器
				renderer: 'svg',
				loop: true, // 是否循环
				autoplay: true, // 是否自动播放
				path: '/static/lottie/success-animation.json'
			});
		},
	}
</script>