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

关于uni-app中的uni.createAnimation循环播放动画的问题

分类:uni-app

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

2019-07-29 16:27 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com (作者) - 愿你不再单机的一天.

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

Darly

Darly

我试了Math.random()-30,像抽风了一样

w***@163.com

w***@163.com

定时器一般在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;  
            },
  • 4***@qq.com

    我想问下为什么我的动画只能执行两步呢?

    2021-09-29 13:09

该问题目前已经被锁定, 无法添加新回复