K-Frame（VR）のCSSキーフレームアニメーションをモックする

Question

K-Frameを使用して1つのエンティティ（例えば、a-circle）の1つのプロパティ（例：スケール）でアニメーションを作成します。これは可能ですか？例えば

、これは単純なケースのようになります。、私は最初の500ミリ秒のために0.1 0.1 1から0.5 0.5 1に、たとえば、規模にしたい

<a-scene> 
    <a-circle 
    position="0 1.25 -5" 
    color="#F55" 
    radius="1" 
    scale=".1 .1 1" 
    animation__scale="property: scale; dir: normal; dur: 500; easing: easeInSine; loop: true; to: 1 1 1" 
    > 
    </a-circle> 
</a-scene> 

、その後0.5に泊まります.5 1を別の500msにし、次の200msで.1 .1に戻り、このプロセス全体を無限に何度も繰り返します。

これも可能ですか？

Answer 1

コンポーネント内のアニメーションをデイジーチェーンして、アニメーションが終了し、次のアニメーションを開始するかどうかをチェックすることができます。
あなたの場合は

アニメーション1終了 - >待ち500ms、アニメーション2 - >アニメーション2終了 - >待機200ms、アニメーション1を開始します。

---

これは、単に animation__[ID]-completeイベントをリッスンして別のイベントを送信することで実現できます。
あなたがそれらをチェーンしただけであれば、開始イベントリストに複数のリスナーをマップすることができます。
あなたが彼らにマッピングされた機能の中に含まれる、または手動で行うことができますいくつかのカスタム待機期間、与えたいと思うしかし ：私も最初のアニメーションをトリガーすることを、 https://jsfiddle.net/gftruj/2qoz8b75/2/
ご注意：ここに

el.addEventListener('animation__scale1-complete', function() { 
    setTimeout(function(){ 
    el.emit('secondAnimation'); 
    },500); 
    }) 
    el.addEventListener('animation__scale2-complete', function() { 
    setTimeout(function(){ 
    el.emit('firstAnimation'); 
    },200); 
    }) 

作業フィドルをloadedイベントでは、ロードされる前に起動されます。