Change image of sky every few seconds with an animation - aframe

Question

I need change the image of sky every few seconds with an animation.
like this. But without the event click, in my case, i need the change of picture with time.
<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

How about this.
You make two animations: a fade-in, and a fade-out:
<a-sky foo>
<a-animation id="fadein-animation"></a-animation>
<a-animation id="fadein-animation"></a-animation>
</a-sky>
The idea is to animate the opacity, and when the image is not visible, switch the source:
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')
})
}
})
Working fiddle here.