Question

可以在aframe的天空中添加淡入或淡出动画吗？

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

在此示例中，当您将鼠标悬停时，背景将会更改，但不会显示动画。

strokeContains

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

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，但依赖于自己的显示组件和属性。

您可以通过动画material.opacity基元的<a-sky>来淡化。这可以通过使用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>

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

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

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

以下是经过修改的演示：https://codepen.io/dansinni/pen/gzbpWy

在A-Frame网站上实际上还有一个例子，它可以完成你想做的事情：https://aframe.io/examples/showcase/360-image-gallery/

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

2 个答案: