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 改进截图