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

【问题标题】：How to set Fade in or Fade out on <a-sky>如何在 <a-sky> 上设置淡入或淡出
【发布时间】：2018-04-18 22:09:30
【问题描述】：

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

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

在此示例中，当您将鼠标悬停时，背景会发生变化，但没有动画。

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>

【问题讨论】：

标签： javascript html aframe virtual-reality

【解决方案1】：

我不会使用上面答案中展示的 CSS。 A-Frame 一般不使用 CSS，而是依赖于自己的显示组件和属性。

您可以通过为<a-sky> 原语的material.opacity 设置动画来淡入淡出。这可以通过使用 A-Frame 核心 <a-animation> 或 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
将 const 和箭头函数等 ES6 功能分别转换为 var 和 function，以获得更好的兼容性（以排除任何不当行为）
在您的自定义set-sky 组件中使用setTimeout 来计时动画。虽然，您可能希望改为依赖事件，这可能会因多个侦听器而变得更加复杂。我只是想给你一个基本的例子。

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

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

【讨论】：

感谢您的回答。你知道 google map 360 使用什么过渡效果/动画吗？
很遗憾，我没有。也许尝试做一个交叉淡入淡出（淡出一个同时淡入另一个）而不是按顺序进行淡入淡出。
你能帮我做吗？我还是一头雾水

【解决方案2】：

尝试添加这个：

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

【讨论】：