Blend Texture (aframe/js)

Question

i have an 360 degree cinemapicture and i try to make that when you click on something the picture blend from one light cinemapicture to an dark cinemapicture so it looks like the light goes off. Some idea how i code that in a js-function?

     <a-scene>
          <a-assets>
            <img id="cinema" src="cinema360degree.png">
            <img id="cinema_dark" src="cinema360degree_dark.png">
            <img id="button" src="playbutton.png">
          </a-assets>
          <a-image id="playit" src="#button" width="4" height="4" position="-28 5 15" rotation="0 90 0" onclick="startmovie()"></a-image>
          <a-sky src="#cinema"></a-sky>
    <script type="text/javascript">
    function startmovie() {
     //blend cinema into cinemadark
     // i got this but it only change it. Its not blending:
 //document.getElementById('skyid').setAttribute('src', '#cinema_dark')
    }
    </script>
        </a-scene>

Answer 1

Id make two spheres, one with the "day" texture, the other with the "night" texture:

<a-sphere id="day" radius="100" material="side: back"></a-sphere>
<a-sphere id="night" radius="101" material="side: back"></a-sphere>

And use the animation component, changing the day's opacity to 0:
Js:

AFRAME.registerComponent("foo", {
  init: function() {
    document.querySelector("#day").addEventListener("click", (e) => {
      this.el.emit("fadeout")
    })
  }
})

Html:

<a-sphere id="one" foo animation="property: material.opacity; to: 0; 
delay: 500; startEvents: fadeout;"></a-sphere>

---

Check it out here.