Animation

Animasi

Animasi adalah seni menciptakan ilusi gerak dengan menampilkan serangkaian gambar statis secara berurutan.

Di aplikasi kita, kita menggunakan animasi untuk membuatnya tampak seolah-olah persegi panjang kita bergerak ke arah kanan.

Bingkai Independen

Untuk memastikan animasi kami berjalan lancar di semua perangkat, kami telah merancangnya agar tidak bergantung pada bingkai.

Artinya, animasi kami tidak terpengaruh oleh perubahan kecepatan bingkai, sehingga memastikan pengalaman yang konsisten dan lancar bagi semua pengguna.

Gerakan Berbasis Waktu

Untuk mengimplementasikan gerak berbasis waktu, kami menggunakan.

Waktu Delta

 Private DeltaTime As TimeSpan

DeltaTime adalah waktu sejak frame terakhir diambil.

 DeltaTime = CurrentFrame - LastFrame

Kecepatan

 Private Velocity As Single = 250.0F

Kecepatan adalah kecepatan pergerakan persegi panjang yang kita inginkan, diukur dalam piksel per detik.

Kita dapat menyesuaikan nilai ini untuk mengubah kecepatan persegi panjang kita.

Jarak

Kita menghitung jarak yang harus ditempuh persegi panjang kita berdasarkan kecepatannya dikalikan dengan deltaTime.

Jarak = Kecepatan * DeltaTime

Ini memastikan bahwa persegi panjang kita bergerak dengan kecepatan yang konsisten, berapa pun kecepatan bingkainya.

Misalnya, jika frame rate rendah, deltaTime akan lebih besar, dan persegi panjang kita akan bergerak lebih jauh dalam frame tersebut sebagai kompensasinya.

Bingkai per Detik	Waktu Delta	Jarak
428.1 Tinggi	0,0023366 Detik	0,58415 Piksel
38,8 Rendah	0,0257694 Detik	6.44235 Piksel

RectPostion.X

RectPosition adalah Vector2 yang mewakili posisi persegi panjang kita.

 Private RectPostion As New Vector2(Rect.X, Rect.Y)

Kita menggunakan Vector2 karena dapat menyimpan nilai floating-point presisi tunggal, yang memungkinkan penempatan persegi panjang kita lebih tepat.

Contoh:

69.7753143 merupakan bilangan floating point presisi tunggal (Single).

Ini penting untuk animasi kita karena posisi persegi panjang kita diperbarui dengan cepat dan presisi tinggi.

 RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt

Kita menggunakan aritmatika vektor untuk menghitung posisi baru persegi panjang kita berdasarkan posisi saat ini dan kecepatannya.

Operator += digunakan untuk memperbarui nilai RectPostion.X di tempatnya, menambahkan hasil kecepatan * deltaTime ke nilainya saat ini.

Rek.X

 Private Rect As New Rectangle(0, 100, 300, 300)

Saat menggambar persegi panjang ke layar, kita menggunakan representasi bilangan bulat dari posisinya, bukan representasi Vector2.

Hal ini memastikan posisi persegi panjang kita selalu sejajar dengan piksel di layar.

Kami melakukan ini untuk menghindari artefak visual seperti tepian buram atau bergerigi.

Kami menggunakan Math.Round untuk membulatkan komponen X dari RectPosition ke nilai integer terdekat.

 Rect.X = Math.Round(RectPostion.X)

Contoh:

Nilai RectPostion.X adalah 69.7753143

Nilai bilangan bulat terdekat adalah 70

Jadi kami menetapkan Rect.X ke 70

 FillRectangle(Brushes.Purple, Rect)

Nilai integer kemudian digunakan untuk menggambar persegi panjang di formulir kita menggunakan fungsi FillRectangle.