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>

所以我可以在mobileMenuOpen上发出#ui事件，让实体及其所有平面淡入并向上移动。但是，opacity="0" #ui <dependency> <groupId>org.postgresql</groupId> <artifactId>postgresql</artifactId> <scope>runtime</scope> </dependency>不会影响子元素，我也不确定动画是否也会如此。我怎样才能达到预期的效果？

Answer 1

内置动画框架无法应用于多个实体，并且（afaik）设置父级的不透明度并不会向其级联。我要做的是制作自己的opacity组件版本，它适用于儿童。我们称之为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>

位置从父级到级联，因此不需要对该属性进行解决方法。

编辑：好的，我认为上述情况应该有效，但是有一些错误显示出来并没有多大意义。可能是我的代码，或者关于动画布线的东西。无论如何，硬编码你的动画可能是目前最好的选择，正如@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/>。

Answer 2

我打算制作一个可以混合成实体的动画组件。

但是现在，你必须手动做一些事情。这意味着要么直接使用tween.js（https://github.com/tweenjs/）和AFRAME.TWEEN，要么复制并粘贴动画并处理在所有实体上触发事件。

Answer 3

You can with D3!

菜单窗格的位置相对于父实体，因此移动父窗体也会移动所有子窗格。这部分很简单。

所有菜单窗格的不透明度都可以使用D3＆＃34; selectAll＆＃34;简洁地动画制作：

  // Increase opacity for all menu-panes individually
  var menuPanes = d3.selectAll('.menu-pane');
  menuPanes.transition()
           .duration(1000)
           .attr('opacity', '1');

查看上面的链接以获取完整示例。它显示了如何选择父UI元素，附加自定义“mobileMenuOpen”＃39;事件，设置转换功能，并触发自定义事件。

我可以使用一个动画设置和设置多个实体的不透明度吗？

3 个答案: