ボールの左右の跳ね回るアニメーション

レッスンに戻る

ボールをこのように右にバウンドさせます。

アニメーションコードを作成します。左までの距離は100pxです。

ソースとして、前のタスクバウンドするボールをアニメーションするの解決策を使用します。

タスクバウンドするボールをアニメーションするでは、アニメーション化するプロパティが1つしかありませんでした。いまは elem.style.left がもう1つ必要です。

水平座標は別の法則に従って変化します。「バウンド」しませんが、ボールを右にずらすように徐々に増加します。

もう一度 animate を書くことができます。

時間関数として linear を使用することもできますが、makeEaseOut(quad) のようなものがはるかに見栄えがよくなります。

コード

          let height = field.clientHeight - ball.clientHeight;
let width = 100;

// animate top (bouncing)
animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  draw: function(progress) {
    ball.style.top = height * progress + 'px'
  }
});

// animate left (moving to the right)
animate({
  duration: 2000,
  timing: makeEaseOut(quad),
  draw: function(progress) {
    ball.style.left = width * progress + "px"
  }
});
        

サンドボックスで解決策を開きます。