uniapp 微信小程序开发，增加了一些lottie动效，这些动效需要结合接口请求触发，比如收藏功能，当收藏后，接口返回数据触发lottie动画。这样就实现了一个动画交互功能。
点击实现收藏，再点击取消收藏。

收藏组件代码

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

<script>
	import {
		add_fav,
		del_fav
	} from '@/config/api.js'
	import operation from '@/components/lottie/getOperation.vue'
	export default {
		components: {operation},
		data() {
			return {

			}
		},
		props: {
			goods_id: {
				type: String | Number,
				default () {
					return '';
				}
			},
			fav_id: {
				type: Array,
				default () {
					return [];
				}
			},
		},

		computed: {
			status: function() {
				var status = false
				if (this.fav_id && this.fav_id.length > 0) {
					status = true
				}
				return status
			}
		},
		methods: {
			fav() {
				if (this.status) {
					this.del_fav()
				} else {
					this.add_fav()
				}
			},
			add_fav() {
				var that = this;
				add_fav({
					goods_id: this.goods_id
				}, {
					params: {},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						that.$emit('getdata', 0)
					}
				}).catch(err => {

				})
			},
			del_fav() {
				var that = this;
				del_fav({
					goods_id: this.goods_id
				}, {
					params: {},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						that.$emit('getdata', 0)
					}
				}).catch(err => {

				})
			},

		}
	}
</script>


<style lang="scss">
	.icon_star {
		width: 90rpx;
		height: 90rpx;
		position: relative;
		z-index: 100;
		margin-right: -20rpx;
		margin-top: 140rpx;
	}
</style>

动画组件代码

<template>
	<div class="lottieBody">
		<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
			}
		},
		watch: {
			status() {
				var that = this;
				that.lottie.setDirection(this.status ? 1 : -1)
				that.lottie.play()
			},
		},
		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>