Animasi adalah grafik
- Agar bisa dirancang, animasi harus dapat direproduksi dan dapat dikombinasikan.
- Semua animasi adalah perubahan nilai berdasarkan suatu input (waktu, scroll, posisi mouse, dan sebagainya), dan perubahan ini bisa digambar sebagai grafik.
- Bentuk grafik itulah yang menentukan rasa gerakan, dan alat untuk membentuk kurva itu sesuai keinginan adalah matematika.
Alat matematika
- Kurva Bezier (easing): Ekspresi percepatan dan perlambatan dengan awal dan akhir yang sudah ditentukan. Bekerja dengan prinsip dua titik kontrol yang menarik kurva seperti magnet. Dibentuk dari penerapan rekursif interpolasi linear. Bahkan untuk gerakan yang sama, kesan yang disampaikan bisa sepenuhnya berbeda tergantung ease-in atau ease-out
- Pendekatan eksponensial:
value += (target - value) * factor melacak target secara halus hanya dengan satu baris. Tetap terasa alami meski target berubah di setiap frame. Digunakan untuk mengikuti kursor, counter, progress bar, dan lain-lain
- Spring: Osilasi teredam berbasis dua gaya, yaitu gaya pemulih dan gaya redaman. Nuansanya ditentukan oleh dua nilai, stiffness dan damping. Berbeda dari easing, tidak memiliki duration, dan saat target berubah, transisi berlangsung alami sambil mempertahankan kecepatan saat ini
- Simulasi fisika: Menggabungkan hukum fisika seperti gravitasi, tumbukan, dan gesekan. Intinya adalah "cukup definisikan aturannya, maka gerakan akan terbentuk dengan sendirinya". Untuk efek seperti confetti, tidak perlu merancang lintasan satu per satu untuk puluhan objek; cukup atur gravitasi dan hambatan udara. Namun karena prediktabilitasnya lebih rendah, ini lebih cocok untuk efek pendukung daripada transisi inti UI
- atan2: Fungsi untuk mencari arah antara dua titik. Digunakan saat elemen perlu menghadap ke arah gerak, atau untuk efek tilt 3D ketika kartu miring ke arah kursor
- Fungsi trigonometri: Optimal untuk pengulangan periodik. Jika beberapa elemen diberi perbedaan fase, efek gelombang bisa dibuat. Cocok untuk typing indicator, latar belakang mengambang, dan sebagainya
- Gelombang gigi gergaji: Berbeda dari gerak bolak-balik halus pada sin, pola ini bergerak dari 0→1 lalu langsung reset, sehingga menghasilkan pengulangan satu arah. Cocok untuk pulse ring, ping, progress berulang, dan lain-lain
Merancang animasi yang kompleks
- Fungsi per segmen: Kurva kompleks dipecah menjadi beberapa segmen, lalu tiap bagian dirancang terpisah dan disambungkan kembali. Ini memungkinkan penyesuaian yang lebih detail dan disengaja dibanding simulasi fisika (contoh: sengaja mengurangi tinggi bounce)
- Memahami dependensi: Titik awal perancangan animasi adalah "nilai ini bergantung pada apa?". Bisa diklasifikasikan menjadi tiga jenis: berbasis waktu (paling umum), berbasis nilai (scroll, posisi mouse), dan berbasis event (dipicu oleh klik, hover)
- Pipelining: Menempatkan potongan-potongan di sepanjang sumbu waktu secara berurutan. Strategi seperti berurutan, tumpang tindih, simultan, dan stagger bisa digabungkan. Tiap potongan bisa dimodifikasi secara independen
- Transisi status: Cara berpindah ke tahap berikutnya berdasarkan kondisi, bukan waktu. Jika kondisi transisi dinyatakan dengan jelas, seperti peluncuran→ledakan→penyebaran→menghilang pada kembang api, ini bisa dikelola dengan state machine
- Pemisahan properti: Beberapa properti (ukuran, warna, transparansi, dan sebagainya) dipisahkan ke track independen. Karena tiap track tidak perlu mengetahui track lain, fine-tuning atau penambahan menjadi lebih mudah
Hal-hal yang perlu dipertimbangkan
- Keacakan: Yang perlu digunakan bukan acak sepenuhnya, melainkan random yang terkontrol. Kuncinya adalah menetapkan batas antara "bagian mana yang dikendalikan" dan "bagian mana yang diserahkan pada random"
- Dua arah: Saat arah berubah di tengah kemunculan, animasi harus dirancang agar bisa berbalik dengan mulus dari keadaan saat ini, supaya tidak terjadi lompatan atau rasa canggung
Batasan dan keunggulan animasi dalam kode
- Untuk animasi kompleks seperti gerakan karakter atau morphing yang presisi, alat khusus seperti Lottie, Rive, atau video lebih cocok.
- Di sisi lain, kekuatan animasi berbasis kode ada pada interaksi real-time yang langsung merespons input pengguna.
Belum ada komentar.