aframe - 我可以用一个动画设置多个实体的不透明度并为其设置动画吗？

Question

我有一个实体，我想像这样设置它:

<a-entity id="ui" opacity="0" position="0 -10 0">
  <a-plane class="menu-pane" position="0 0 -60" opacity="0" color="blue" rotation="0 0 0" height="50" width="30"></a-plane>
  <a-plane class="menu-pane" position="50 0 -40" opacity="0" color="blue" rotation="0 -50 0" height="50" width="30"></a-plane>
  <a-plane class="menu-pane" position="-50 0 -40" opacity="0" color="blue" rotation="0 50 0" height="50" width="30"></a-plane>
  <a-animation begin="mobileMenuOpen"  attribute="position" dur="550" fill="both" to="0 0 0"></a-animation>
  <a-animation begin="mobileMenuOpen"  attribute="opacity"  dur="550" fill="both" to="1"></a-animation>
</a-entity>

所以我可以在 #ui 上发出 mobileMenuOpen 事件，让实体及其所有平面淡入淡出并向上移动。但是，#ui 上的 opacity="0" 不会影响子元素，而且我不确定动画是否也会。我怎样才能达到我想要的效果？

Answer 1

内置动画框架不能应用于多个实体，并且(afaik)设置父级的不透明度不会级联到它的子级。我会做的是制作你自己的 opacity 版本组件，它确实适用于 child 。我们称它为group-opacity .这是一个原始版本(可能不适用于从建模工具导出的模型)，但是 –

AFRAME.registerComponent('group-opacity', {
  schema: {opacity: {default: 1.0}},
  update: function () {
    var opacity = this.data.opacity;
    var children = [].slice.call(this.el.children);
    children
      .filter(function (child) { return child.hasAttribute('opacity'); })
      .forEach(function (child) {
        child.setAttribute('opacity', opacity);
      });
  }
});

HTML:

<a-entity id="ui" group-opacity="opacity: 0" position="0 -10 0">
  <a-plane class="menu-pane" position="0 0 -60" opacity="0" color="blue" rotation="0 0 0" height="50" width="30"></a-plane>
  <a-plane class="menu-pane" position="50 0 -40" opacity="0" color="blue" rotation="0 -50 0" height="50" width="30"></a-plane>
  <a-plane class="menu-pane" position="-50 0 -40" opacity="0" color="blue" rotation="0 50 0" height="50" width="30"></a-plane>
  <a-animation begin="mobileMenuOpen"  attribute="position" dur="550" fill="both" to="0 0 0"></a-animation>
  <a-animation begin="mobileMenuOpen"  attribute="group-opacity.opacity"  dur="550" fill="both" to="1"></a-animation>
</a-entity>

位置确实从父级级联到子级，因此不需要对该属性进行变通。

---

编辑:好的，我认为上面的内容应该有效，但是出现了一些没有多大意义的错误。可能是我的代码，或者关于动 Canvas 线的东西。无论如何，正如@ngokevin 所说，对动画进行硬编码可能是目前最好的选择。让您入门的快速示例:

AFRAME.registerComponent('group-opacity', {
  tick: function (t) {
    var opacity = (Math.sin(t / 1000) + 1) / 2;
    this.el.object3D.traverse(function (o) {
      if (o.material) {
        o.material.opacity = opacity;
      }
    });
  }
});

请注意，您不需要 <a-animation/>在这种情况下完全没有。