讓球向右彈跳
重要性:5
在 讓球彈跳 任務中,我們只有一個要執行的動畫屬性。現在我們需要再一個: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"
}
});