aframe/animation：一時停止して再開する方法は？

Question

私はフレーム（ar.js）で360°回転のアニメーションを持っています。私は一時停止してそれを続行したいのですが、私はそれをやりなおすことができますが、最初からやり直します。

<a-entity> 
    <a-entity 
     gltf-model="#tree-gltf"> 
    </a-entity> 
    <a-animation 
     begin="rotation-begin" 
     end="rotation-end" 
     attribute="rotation" 
     to="0 360 0" 
     direction="alternate" 
     dur="10000" 
     repeat="indefinite"> 
    </a-animation> 
</a-entity> 

Animation documentation「始まり」と「終わり」のイベントが、一時停止したときに初めからではなく現在の値から再起動して「開始」へのアクセス権を与えます。

Entity documentation同じものであるpause（）とplay（）へのアクセス権を与えます。 「開始」属性が存在する場合、Play（）はまったく機能しないため、イベントまたは関数のいずれかを選択する必要があります。 しかし、play（）も、アニメーションを一時停止した場所からではなく、最初からアニメーションを再開します。

属性durを1時間に設定してアニメーションを遅くして一時停止のように見せても、醜いトリックを試みましたが、「dur」を10秒に戻しても再起動しません。

どのようなアイデアが役に立ちますか？

Answer 1

Kevin Ngoのanimation-componentを使用すると、一時停止/再開が適切にサポートされます。

コンポーネントを含むだけでなく、あなたのコードは次のようになります。 rotation-begin、 rotation-pauseとあなたがトリガすることができ rotation-resume：

<a-entity 
    animation="property:rotation; startEvents:rotation-begin; pauseEvents: rotation-pause; resumeEvents: rotation-resume; to:0 360 0; dir:alternate; dur:10000; repeat:indefinite" 
    gltf-model="#tree-gltf"> 
</a-entity> 

これはあなたに3つのイベントを提供します。

See a demo here