Question

我需要每隔几秒钟用动画改变天空图像。

喜欢this。但是没有事件点击，在我的情况下，我需要随着时间的推移更改图片。

    <a-assets>
        <img id="water" src="./3D/letras/Agua.jpg"/>
        <img id="air" src="./3D/letras/Aire.jpg"/>
        <img id="horizont" src="./3D/letras/Horizonte.jpg"/>
        <img id="hector" src="./3D/letras/hecxtor.jpg"/>
    </a-assets>

Answer 1

这个怎么样。
你制作两个动画：淡入淡出和淡出：

<a-sky foo>
   <a-animation id="fadein-animation"></a-animation>
   <a-animation id="fadein-animation"></a-animation>
</a-sky>

想法是为不透明度设置动画，当图像不可见时，切换源：

AFRAME.registerComponent("foo", {
  init: function() {
    var self = this.el
    var fadeInAnim = document.querySelector("#fadein-animation")
    var fadeOutAnim = document.querySelector("#fadeout-animation")
    var images = ["img1.jpg","img2.jpg"]
    var switchflip = 1
    fadeOutAnim.addEventListener("animationend", (e) => {
      self.setAttribute("material", "src", images[switchflip])
      switchflip = switchflip === 1 ? 0 : 1
      self.emit('fadein')
    })
    fadeInAnim.addEventListener("animationend", (e) => {
      self.emit('fadeout')
    })
 }
})

工作小提琴here。

用动画每隔几秒更改一次天空图像

1 个答案: