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>

总结:uniapp 使用lottiefiles 和vue 不一样
vue是安装 npm install --save vue-lottie
uniapp 是安装 npm install --save lottie-miniprogram

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐