如何在 <a-sky> 上设置淡入或淡出

Question

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

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

在此示例中，当您悬停鼠标时，背景会发生变化，但会出现 w/o 个动画。

AFRAME.registerComponent('set-sky', {
  schema: {
    default: ''
  },
  init() {
    const sky = document.querySelector('a-sky');
    this.el.addEventListener('click', () => {
      sky.setAttribute('src', this.data);
    });
  }
});

<script src="https://rawgit.com/aframevr/aframe/b813db0614ac2b518e547105e810b5b6eccfe1c8/dist/aframe.min.js"></script>
<a-scene>
  <a-camera position="0 2 4">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
  </a-camera>

  <a-sphere color="#F44336" radius="1" position="-4 2 0" set-sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-sphere>

  <a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"></a-sphere>

  <a-sky></a-sky>
</a-scene>

Answer 1

尝试添加这个：

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;}
  }

Answer 2

我不会像上面的答案那样使用 CSS。 A-Frame一般不使用CSS，而是依赖自身的显示组件和属性。

您可以通过为 <a-sky> 原语的 material.opacity 设置动画来淡入淡出。这可以通过使用 A-Frame 核心 <a-animation>, or the aframe-animation-component 来完成，这似乎正在成为标准。

如果您使用我推荐的 aframe-animation-component，您可以像这样设置 <a-sky>：

 <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>

然后在您的自定义组件中，您将使用 emit（例如 sky.emit('fadein')）为每个动画触发 startEvents。

我分叉了你的代码并做了一些修改：

更新A-Frame版本至正式版
已将天空图像上传到 CDN 以避免 CORS 问题
将上述图像定义为资产以便更好地加载
为 <a-sky>
添加了aframe-animation-component
将 ES6 功能（例如 const 和箭头函数）分别转换为 var 和 function，以获得更好的兼容性（以排除任何不当行为）
在您的自定义 set-sky 组件中使用了 setTimeout 来为动画计时。虽然，您可能希望改为依赖事件，但如果有多个侦听器，事件会变得更加复杂。我只是想给你一个基本的例子。

修改后的演示：https://codepen.io/dansinni/pen/gzbpWy

实际上 A-Frame 网站上还有一个示例，它几乎可以满足您的需求：https://aframe.io/examples/showcase/360-image-gallery/

如何在 <a-sky> 上设置淡入或淡出

How to set Fade in or Fade out on <a-sky>

html

javascript

virtual-reality

aframe