Question

有谁知道如何更新动画以更改多个属性？示例：3个按钮，全部更改a动画的旋转。第一个按钮的旋转动画为30 0 0到一个框，第二个按钮的旋转动画为0 90 0到同一个框，第三个按钮的旋转动画为100 0 0到同一个框。每个按钮都调用a-animation的id。

我'激活'第一个按钮的动画，但其他两个没有。

Answer 1

您可以使用由不同事件触发的三个单独的动画：

<a-box id="box">
  <a-animation attribute="rotation" begin="button1click"></a-animation>
  <a-animation attribute="rotation" begin="button2click"></a-animation>
  <a-animation attribute="rotation" begin="button3click"></a-animation>
</a-box>

然后这是一个在单击时在实体上发出事件的组件（在场景之前复制并粘贴此代码）：

AFRAME.registerComponent('emit-on-click', {
  schema: {
    target: {type: 'selector'},
    event: {type: 'string'}
  },

  init: function () {
    var el = this.el;
    var targetEl = this.data.target;
    var eventName = this.data.event;

    el.addEventListener('click', function () {
      targetEl.emit(eventName);
    })
  }
});

然后将组件附加到按钮（无论它们是什么）：

<a-entity id="button1" emit-on-click="target: #box; button1click"></a-entity>
<a-entity id="button2" emit-on-click="target: #box; button2click"></a-entity>
<a-entity id="button3" emit-on-click="target: #box; button3click"></a-entity>

单击按钮时，我们编写的组件将在框中触发事件。动画会听取该事件并将播放。

另请查看https://github.com/ngokevin/aframe-animation-component

AFrame：使用多个属性更新实体的a动画

1 个答案: