uniapp微信小程序开发，要求页面中，尽可能的增加动画效果，于是收藏也给增加了一个动画，封装成可复用的组件，只需要更换json数据就可以更换为其他的图标动画。以便于后期重复使用。

使用组件

<div class="icon_star">
						<operation :status.sync="status" width='100' height='100' canvasId="canvasId3"
							path="https://images.wanjunshijie.com/mini/chuban/static/collection/data1.json"></operation>
					</div>

组件代码

<template>
	<div class="lottieBody" @click="getChangeStatus">
		<canvas :id="canvasId" :canvas-id="canvasId" type="2d" class="lottie-canvas"></canvas>
	</div>
</template>

<script>
	import lottie from 'lottie-miniprogram'
	export default {
		props: {
			width: {
				type: Number,
				value: 100
			},
			canvasId: {
				type: String,
				default: 'canvasId'
			},
			height: {
				type: Number,
				value: 100
			},
			status: {
				type: Boolean,
				value: false
			},
			path: {
				type: String,
				observer: function observer() {
					this.init();
				}
			}
		},
		onReady() {
			// 初始动画
			var that = this;
			that.init();
		},
		data() {
			return {
				show: true,
				_inited: false
			}
		},
		methods: {
			getChangeStatus() {
				var that = this;
				console.log(this.status)
				that.lottie.setDirection(this.status ? -1 : 1)
				that.$emit('update:status', this.status ? false : true)
				that.lottie.play()
			},
			getStatus() {
				this.lottie.goToAndStop(this.status ? this.lottie.getDuration(true) - 1 : 0, true)
			},
			init() {
				if (this._inited) {
					return
				}
				this.createSelectorQuery().selectAll('#' + this.canvasId).node(res => {
					console.log(res)
					const canvas = res[0].node
					const context = canvas.getContext('2d')

					canvas.width = this.width
					canvas.height = this.height

					lottie.setup(canvas)
					this.lottie = lottie.loadAnimation({
						loop: false,
						autoplay: false,
						path: this.path,
						rendererSettings: {
							context,
						},
					})
					this.getStatus()
					this._inited = true
				}).exec()
			},
			destory: function destory() {
				if (this.lottie) {
					this.lottie.destroy();
					this.lottie = null;
				}
			}
		},
		onUnload() {
			this.destory();
		}
	}
</script>

<style>
	.lottie-canvas {
		width: 100%;
		height: 100%;
	}

	.lottieBody {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		position: relative;
	}
</style>