问题描述: 在开发uniapp时发现,在使用数组来存储动画的场景下动画总是不生效

通过多次尝试发现
1.  在方法中临时创建的animation实例导出的数据不是reactive的
2.  数组并没有监控到元素对象的变动

解决方法

  1. 把animation实例定义在data中, 在onload中初始化,在方法中使用,可以解决这个问题
    猜想原因可能是在data中的animation实例会被vue监控,从而触发animation实例导出数据的监控。 后面有待确认其原因
export default {
		data() {
			return {
				ani: null,
			}
		},
		onLoad() {
			this.ani = uni.createAnimation()
		},

		methods: {
			praise(index) {
				this.praiseAnimation.splice(index, 1, this.ani.opacity(1).translateY(-80).scale(1.5).step().export())
			}
		}
	}
  1. 因为javascript的原因,数组某个位置的元素改变并不会被数组监控到,解决方法就是使用数组那些已经被监控的方法
		praise(index) {
			this.praiseAnimation.splice(index, 1, uni.createAnimation().opacity(1).translateY(-80).scale(1.5).step().export())
		}

参考:https://ask.dcloud.net.cn/question/89860

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐