uni.createAnimation

动画描述

实现一个以左上角为锚点,以Z轴做平面抬起及落下的动画效果

动画代码

template

					<image v-if="showHot(item.cname)" :animation="animationData" :key="item.cname"
						src="https://cdn.xxx.com/static/cert/course_fire_icon2.png" mode="">
					</image>

js部分

			initAnimation() {
				this.animation = uni.createAnimation({
					transformOrigin: "0% 100%",
					duration: 500,
					timingFunction: 'ease',
				})
				this.jumpAnimation()
			},
			jumpAnimation() {
				this.interval = setInterval(async () => {
					this.animation
						.rotateZ(-20).step()
						.rotateZ(0).step()
					this.animationData = this.animation.export();
					setTimeout(() => {
						this.animationData = null; // 清除animationData,防止二次动画执行失败
					})
				}, 2000)
			},

问题原因

以上代码在小程序端OK, 但在App端无效,面向百度开发后得知,
由于 JavaScript 的限制，Vue 不能检测以下数组
1.直接给数组的某个索引复制,
2.直接修改数组的长度,
造成APP端无效的原因就是直接赋值
this.animationData = this.animation.export();

此处就需要再 data中添加一个数组变量来实现vue对状态的监控

改进方案

template

					<image v-if="showHot(item.cname)" :animation="animaArr[0]" :key="item.cname"
						src="https://cdn.xxx.com/static/cert/course_fire_icon2.png" mode="">
					</image>

js部分

		initAnimation() {
				this.animation = uni.createAnimation({
					transformOrigin: "0% 100%",
					duration: 500,
					timingFunction: 'ease',
				})
				this.jumpAnimation()
			},
			jumpAnimation() {
				this.interval = setInterval(async () => {
					this.animation
						.rotateZ(-20).step()
						.rotateZ(0).step()
					this.animationData = this.animation;
					this.animaArr.splice(0, 1, this.animationData
						.export()); // 把动画放进 data下的空数组内, 便于vue能够监听到变化
					setTimeout(() => {
						this.animationData = null; // 清除animationData,防止二次动画执行失败
						this.animaArr = []; //定期清除 animaArr,或者说是每次动画执行后清除, 这样让vue能够再次监听到动画数组
					})
				}, 2000)
			},

改动

最主要的变动就是将

替换为

git 改进截图