2

フレーム内のアニメーションをチェーンリンクする方法はありますか? 一度クリックして立方体をある位置に移動し、その位置をx時間保持してから、アニメーションを元の場所に戻そうとしています。

これまでのところ、アニメーションは 2 つしかありません。2 つ目は、animationend イベントをリッスンするときに始まります。問題は、両方のアニメーションが animationend を発行し、それが 2 番目のアニメーションを何度もトリガーすることです。このアプローチは正しくないようです

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Curved Images</title>
    <meta name="description" content="Curved Images - A-Frame">
   <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  </head>
  <body>

    <a-scene>
    <a-entity position="0 1.8 4">
    <a-entity camera look-controls wasd-controls>
        <a-entity position="0 0 -3"
                geometry="primitive: ring; radiusOuter: 0.30;
                          radiusInner: 0.20;"
                material="color: cyan; shader: flat"
                cursor="maxDistance: 30; fuse: true">
        <a-animation begin="click" easing="ease-in" attribute="scale"
             fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
        <a-animation begin="fusing" easing="ease-in" attribute="scale"
             fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
      </a-entity>
      </a-entity>
      </a-entity>

      <a-box id="orange-cube" position="0 3.5 -2" rotation="30 30 0" width="2" depth="2"
             height="2" color="#583C87" roughness="0.8">
             <a-animation begin="click" attribute="position" from="0 3.5 -2" to="3 2 -2"
                   easing="linear" dur="2000" fill="forward"></a-animation>
            <a-animation begin="fade" attribute="position" from="3 2 -2" to="0 3.5 -2"
                   easing="linear" dur="2000" fill="backwards"></a-animation>
      </a-box>

    </a-scene>
    <script type="text/javascript">
    document.querySelector('#orange-cube').addEventListener('animationend', function () {
    document.querySelector('#orange-cube').emit('fade');
  });
//document.querySelector('#orange-cube').emit('fade');
    </script>
  </body>

</html>
4

3 に答える 3

2

でアニメーションを再生できますanimationEl.play()。必要な条件に基づいてアニメーションをトリガーする JS を作成できます。宣言型 API (A-Frame 0.2.0) は現在、アニメーション シーケンスをサポートしていません。

于 2016-06-08T06:05:29.407 に答える
1

A-Frame は tween.js オブジェクトを公開するので、自分で接続できます。

AFRAME.TWEEN

https://github.com/tweenjs/tween.js/

私は独自の新しいアニメーション コンポーネントを作成して、<a-animation>制限されていてフレームワークに収まらないタグ​​を非推奨にすることを願っています。

于 2016-07-13T18:07:23.793 に答える