バウンドするボールのアニメーションを作成する
重要度:5
バウンドするには、CSSプロパティtopとposition:absoluteを、position:relativeを設定したフィールド内のボールに使用します。
フィールドの一番下の座標はfield.clientHeightです。CSSの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'
}
});