文章/答案/技术大牛

发布

社区首页 >问答首页 >我可以用一个动画设置和动画多个实体的不透明度吗？

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

Stack Overflow用户

提问于 2016-07-14 08:30:39

回答 3查看 2.1K关注 0票数 3

我有一个有飞机的实体，我很想像这样：

<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" on #ui不影响子元素，我也不确定动画是否会影响子元素。我怎样才能达到我想要的效果？

aframe

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-07-14 15:38:47

内置的动画框架不能应用于多个实体，并且(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/>。

票数 4

Stack Overflow用户

发布于 2016-07-14 17:40:45

我计划制作一个可以混合到实体中的动画组件。

但就目前而言，你必须做更多的手工操作。这意味着要么将tween.js直接(https://github.com/tweenjs/)与AFRAME.TWEEN结合使用，要么复制和粘贴动画，并对所有实体触发事件进行处理。

票数 2

Stack Overflow用户

发布于 2016-07-15 18:50:14

你可以和D3在一起！

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

所有菜单窗格的不透明度可以使用D3的“selectAll”简洁地动画化：

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

请查看上面的链接以获得完整的示例。它展示了如何选择父UI元素、附加自定义'mobileMenuOpen‘事件、设置转换函数以及触发自定义事件。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38369209

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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