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

效果图

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>
相关推荐
学会煎墙10 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
淡淡蓝蓝11 小时前
uni-app小程序往飞书多维表格写入内容(包含图片)
小程序·uni-app·飞书
晨枫阳11 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
iOS阿玮12 小时前
苹果 Swift 安卓SDK上线,用一套 Swift 代码开发安卓 App 成为可能!
uni-app·app·apple
2501_9159214312 小时前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview
liusheng12 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
游戏开发爱好者813 小时前
iOS 26 App 开发阶段性能优化 从多工具协作到数据驱动的实战体系
android·ios·小程序·uni-app·iphone·webview·1024程序员节
2501_9151063213 小时前
深入剖析 iOS 26 系统流畅度,多工具协同监控与性能优化实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone
游戏开发爱好者816 小时前
iOS 26 App 查看电池寿命技巧,多工具组合实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe060116 小时前
🚀 拥抱 create-uni,一行命令轻松集成 Uni ECharts!
vue.js·uni-app·echarts