uniapp 使用lottiefiles动画_lottiefiles怎么用-CSDN博客

本文链接：https://blog.csdn.net/weixin_44705979/article/details/128202353

本文介绍如何在UniApp项目中引入并使用Lottie动画。通过安装lottie-miniprogram依赖，设置Canvas元素，并加载动画JSON文件，实现动画播放效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装依赖

npm install --save lottie-miniprogram

2.页面使用

<view ref="animArean" class="donghua" id="renderjs-view">
<canvas id="lottie_demo" type="2d" style="display: inline-block;width: 250px; height: 248px;" />
</view>

<script>
	import lottie from 'lottie-miniprogram';
	import * as lottieJson from '../../static/charging.json'
	let ani = null;
	export default {
		data() {
			return {
				inited: false,
			}
		},
		onShow() {
			this.init()
		},
		onLoad() {

		},
		onReady() {

		},
		onHide() {
		},
		onUnload() {
		
		},
		methods: {
			init() {
				if (this.inited) {
					return;
				}
				this.createSelectorQuery()
					.select('#lottie_demo')
					.node(res => {
						console.log(res); // 节点对应的 Canvas 实例。
						const canvas = res.node;
						const context = canvas.getContext('2d');
						canvas.width = 250;
						canvas.height = 248;
						lottie.setup(canvas);
						ani = lottie.loadAnimation({
							loop: true,
							autoplay: true,
							animationData: require('../../static/charging.json'),
							rendererSettings: {
								context
							}
						});
						this.inited = true;
					})
					.exec();
			},
		}
	}
</script>