返回課程

讓球向右彈跳

重要性:5

讓球向右彈跳。就像這樣

撰寫動畫程式碼。距離左邊為 100px

讓球彈跳 前一個任務的解答作為來源。

讓球彈跳 任務中,我們只有一個要執行的動畫屬性。現在我們需要再一個:elem.style.left

水平座標會依據另一條定律改變:它不會「彈跳」,而是逐漸增加,將球往右邊移動。

我們可以為它再寫一個 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"
  }
});

在沙盒中開啟解決方案。