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

【问题标题】：AFrame: Updating an entity's a-animation with multiple attributesAFrame：使用多个属性更新实体的动画
【发布时间】：2016-08-11 04:31:37
【问题描述】：

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

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

【问题讨论】：

你能粘贴一些代码吗？

标签： aframe

【解决方案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

【讨论】：