最近学习ae的一些基本功能，于是跟着学习了一些简单的动画，并想着怎么融入到自己写的项目中去。于是加入到了自己正在开发的微信小程序中。

组件使用

<div class="list" v-for="(item,index) in list" :key="index">
	<div class="listItem" @click="changeActive(item.id)" :class="{active:active==item.id}">
		<div class="icon">
			<operation :status="active==item.id" :itemId='item.id' width='100' height='100'
				:canvasId="item.id"
				:path="'https://images.wanjunshijie.com/mini/yujian/static/indexFooter/'+item.icon+'/data1.json'">
			</operation>
		</div>
		<span>{{item.title}}</span>
	</div>
</div>
list: [{
	title: '首页',
	icon: 'icon1',
	id: 'home',
}, {
	title: '公告',
	icon: 'icon2',
	id: 'bulletinBoard',
}, {
	title: '体验',
	icon: 'icon3',
	id: 'tiyan',
}, {
	title: '电话本',
	icon: 'icon4',
	id: 'phoneBook',
}, {
	title: '我的',
	icon: 'icon5',
	id: 'my',
}, ],
changeActive(name) {
	this.active = name
	console.log(this.active)
},

组件封装

<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
			},
			itemId: {
				type: String,
				value: 100
			},
			status: {
				type: Boolean,
				value: false
			},
			path: {
				type: String,
				observer: function observer() {
					this.init();
				}
			}
		},
		watch: {
			status() {
				this.getChangeStatus()
			},
		},
		onReady() {
			// 初始动画
			var that = this;
			that.init();
		},
		data() {
			return {
				show: true,
				_inited: false
			}
		},
		methods: {
			getChangeStatus() {
				var that = this;
				if (this.status) {
					that.lottie.setDirection(1)
					that.lottie.play()
				} else {
					this.lottie.goToAndStop(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.getChangeStatus()
					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>

资源文件

资源文件 提取码: 7301