Animasikan bola yang memantul
Untuk membuatnya memantul kita bisa menggunakan properti CSS top
dan position:absolute
untuk bola yang berada didalam bidang dengan position:relative
.
Koordinat bawah dari bidangnya adalah field.clientHeight
. Properti CSS top
mengacu pada bagian atas dari bolanya. Jadi itu haruslah berasal dari 0
sampai field.clientHeight - ball. clientHeight
, itulah yang menjadi posisi terbawah dari bagian atas bolanya.
Untuk mendapatkan efek ???memantul??? kita bisa menggunakan fungsi waktu bounce
di mode easeOut
.
Ini adalah kode akhir dari animasinya:
let to = field.clientHeight - ball.clientHeight;
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw(progress) {
ball.style.top = to * progress + 'px'
}
});