AFrame: обновление a-анимации объекта с помощью нескольких атрибутов

Кто-нибудь знает, как обновить анимацию, чтобы изменить несколько атрибутов? Пример: 3 кнопки, все изменяют поворот a-анимации. Первая кнопка имеет анимацию поворота 30 0 0 в поле, вторая кнопка имеет анимацию поворота 0 90 0 в то же поле, а третья имеет 100 0 10 в том же поле. Каждая кнопка вызывает идентификатор анимации.

Я «активирую» анимацию первой кнопки, а две другие - нет.


aframe
person garciapn    schedule 10.08.2016    source источник
comment
Не могли бы вы вставить код?   -  person ngokevin    schedule 10.08.2016

Ответы (1)


arrow_upward
1
arrow_downward

У вас может быть три отдельных анимации, которые запускаются разными событиями:

<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

person ngokevin    schedule 10.08.2016