Question

最近我发了一篇关于如何随时间改变图像天空的帖子 here

但是，对于图像的更改我使用setTimeout函数，我需要使用处理程序tick来更改图像。

此HTML

    AFRAME.registerComponent("foo", {

            init: function () {
                //Math.floor(time);
                var self = this.el;
                var fadeOutAnim = document.querySelector("#fadeout-animation");

                var images = ["./3D/letras/Agua.jpg", "./3D/letras/Aire.jpg", "./3D/letras/hector.jpg"];
                var index = 0;
                fadeOutAnim.addEventListener("animationend", (e) => {
                    self.setAttribute("material", "src", images[index]);
                    index++;

                    self.emit('fadein');

                });
            },
            tick: function (time, timeDelta) {
                time = Math.floor(time);
                console.log(time);
                var el = this.el;
                var fadeInAnim = document.querySelector("#fadein-animation");
                fadeInAnim.addEventListener("animationend", (e) => {

                    if (time >= 5000 && time <= 5030) {
                        el.emit('fadeout');
                    }

                });

                if (time >= 5000 && time <= 5030) {
                    el.emit('fadeout');
                }
            },
          }
        );

这是我的组件

{{1}}

问题：

有没有办法使用抽动时间，改变？再次感谢

here

Answer 1

您可以使用一个临时变量来计算使用dt的时间，当它超过时间限制（5s？）然后将其设置为0;

AFRAME.registerComponent("foo", {
 init: function() {
  this.timer = 0
  this.flip = false
 },
 tick(function(time, dt) {
  this.timer += dt
  if (this.timer > 1000) {
   console.log("second has passed")
   if (flip)
     //fadein
   else
     //fadeout
   this.flip = !this.flip
   this.timer = 0
  }
 }
}

live fiddle here

用处理程序刻度的时间改变图像天空

1 个答案: