Javascript 如何设置淡入淡出<；a-sky>；

是否可以在帧中的天空中添加淡入或淡出动画

当用户将光标悬停在球上时，如何添加动画

在本例中，当您将鼠标悬停时，背景将更改，但不带动画

AFRAME.registerComponent（'set-sky'{
模式：{
默认值：“”
},
init（）{
const sky=document.querySelector（'a-sky'）；
this.el.addEventListener（'click'，（）=>{
setAttribute（'src'，this.data）；
});
}
});

尝试添加以下内容：

HTML:
  sky.setAttribute("style", "-webkit-animation:opac 6s linear forwards";
  sky.setAttribute("style", "animation:opac 6s linear forwards";
CSS:
  @-webkit-keyframes opac {
      0% {opacity: 0;}
      100% {opacity: 1;}
  }
  @keyframes opac {
      0% {opacity: 0;}
      100% {opacity: 1;}
  }

我不会像上面的回答那样使用CSS。A-Frame通常不使用CSS，而是依赖于自己的显示组件和属性

您可以通过设置
材质的动画来淡入淡出。
或的不透明度
，这似乎正在成为标准

如果您使用我推荐的，您可以设置

将ES6功能（如
const
和arrow函数）分别转换为
var
和
function
，以实现更好的兼容性（排除任何不当行为）
在自定义
set sky
组件中使用
setTimeout
对动画计时。尽管如此，您可能希望改为依赖事件，这对于多个侦听器可能会变得更加复杂。我只是想给你一个初步的例子

这是修改后的演示：

实际上，在A-Frame网站上还有一个例子，它几乎完成了您想要做的事情：
谢谢您的回答。你知道google map 360使用什么过渡效果/动画吗？不幸的是，我不知道。也许试着做一个交叉淡入淡出（淡出一个，同时淡入另一个），而不是按顺序淡入淡出。你能帮我吗？我还是很困惑
 <a-sky src="#sky-1"
     animation__fadein="startEvents: fadein; property: material.opacity; from: 0; to: 1; dur: 1000;"
     animation__fadeout="startEvents: fadeout; property: material.opacity; from: 1; to: 0; dur: 1000;"></a-sky>