如图,在使用createAnimation的时候打算写一个setInterval循环播放一个图片上下移动的动画,在电脑上模拟iphoneX时能够循环播放,但是手机真机测试时只会播放一次,这要怎么解决?

4***@qq.com
- 发布:2019-07-29 16:27
- 更新:2019-12-05 11:28
- 阅读:9625


4***@qq.com (作者) - 愿你不再单机的一天.
解决了。调用translateY的值需要为随机值,即Math.random()。如果是准确的值就会导致无法循环播放,不太懂这个机制产生的原因,希望能解释一下。

定时器一般在CPU紧张的时候派发任务时间一般都不准的,你可以将间隔时间大于动画总时间javascript
setTimeout(function() {
// 动画0
var animation0 = uni.createAnimation({
transformOrigin: "50% 0 50%",
duration: 1600,
timingFunction: 'ease',
delay: 100
});
this.animation0 = animation0;
this.intervalID = setInterval(function() {
this.animationAction0(this.isTop0 ? 20 : 0);
}.bind(this), 2000)
}.bind(this), 0)
animationAction0: function(detaY) {
console.info("animationAction:" + detaY);
this.animation0.translateY(detaY).step();
this.animationData0 = this.animation0.export();
this.isTop0 = !this.isTop0;
},