AFrame：複数の属性を持つエンティティのアニメーションを更新する

Question

複数の属性を変更するためにアニメーションを更新する方法を知っている人はいますか？例：3つのボタン。すべてがアニメーションの回転を変更します。最初のボタンは、ボックスに30 0 0の回転アニメーションを有し、2番目のボタンは、同じボックスに対して0 90 0の回転アニメーションを有し、3つ目は、同じボックスに100 0 10を有する。各ボタンはアニメーションのIDを呼び出しています。

最初のボタンのアニメーションをアクティブにしますが、他の2つのアニメーションはアクティブにしません。

Answer 1

あなたはさまざまなイベントによってトリガされている3つの別々のアニメーションかもしれない：

<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