バウンドするボールのアニメーション
重要性: 5
バウンドさせるには、position:relative をもつフィールド内のボールに対して、CSS プロパティ top と position:absolute を使うことで実現できます。
フィールドの下部の座標は field.clientHeight です。しかし、top プロパティはボール上部の座標のため、下端の位置は field.clientHeight - ball.clientHeight になります。
したがって、top を 0 から field.clientHeight - ball.clientHeight までアニメートします。
あとは、“バウンド” 効果を行うためにタイミング関数 bounce を easeOut モードで使います。
これがアニメーションの最終的なコードです:
let to = field.clientHeight - ball.clientHeight;
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw(progress) {
ball.style.top = to * progress + 'px'
}
});