Developer Mencari Alternatif yang Lebih Baik untuk Fungsi Easing Animasi Tradisional

Tim Komunitas BigGo
Developer Mencari Alternatif yang Lebih Baik untuk Fungsi Easing Animasi Tradisional

Fungsi easing animasi telah menjadi landasan desain gerakan digital selama beberapa dekade, namun developer semakin merasa terbatas oleh fungsi-fungsi tersebut. Fungsi matematika ini mengubah gerakan linear menjadi animasi yang terlihat lebih natural dengan mengontrol bagaimana objek berakselerasi dan berdeselerasi. Namun, segelintir fungsi yang sama dari era Flash terus mendominasi, membuat kreator menginginkan lebih banyak fleksibilitas dan kontrol.

Jenis-jenis Fungsi Easing yang Umum:

  • easeInOutCubic: Akselerasi dan deselerasi yang halus menggunakan kurva kubik
  • easeInOutElastic: Menambahkan efek pantulan/elastis yang melampaui batas
  • easeInOutBack: Mencakup antisipasi (gerakan mundur) sebelum gerakan maju
  • Linear: Gerakan dengan kecepatan konstan (terlihat mekanis)
Gambaran umum fungsi easing dalam animasi, menampilkan penerapannya dalam desain gerak digital
Gambaran umum fungsi easing dalam animasi, menampilkan penerapannya dalam desain gerak digital

Masalah dengan Fungsi Easing Standar

Ekosistem saat ini sangat bergantung pada serangkaian kecil fungsi yang telah ditentukan seperti easeInOutCubic, easeInOutElastic, dan easeInOutBack. Meskipun fungsi-fungsi ini bekerja dengan baik untuk animasi dasar, mereka tidak memiliki kontrol yang bernuansa seperti yang dinikmati animator tradisional ketika membuat gerakan secara manual. Developer mendapati diri mereka berulang kali menggunakan kurva yang sama, menghasilkan hasil yang dapat diprediksi dan terkadang terlihat mekanis.

Masalah inti berasal dari sifat kaku dari fungsi-fungsi ini. Tidak seperti animasi tradisional di mana setiap gerakan dapat dibuat secara unik untuk konteksnya, easing berbasis kode memaksa kreator untuk memilih dari menu opsi yang terbatas. Kendala ini menjadi sangat terlihat dalam animasi karakter prosedural dan grafis bergerak di mana variasi dan kontrol halus sangat penting.

Solusi Closed-Form Mendapat Perhatian

Terobosan signifikan dalam diskusi ini berasal dari pendekatan berbasis fisika menggunakan solusi matematika closed-form. Seorang developer membagikan implementasi lengkap sistem osilator harmonik teredam yang dapat menghasilkan gerakan seperti pegas tanpa memerlukan simulasi langkah demi langkah. Pendekatan ini menawarkan beberapa keunggulan dibandingkan metode tradisional.

Solusi closed-form memungkinkan developer untuk menghitung titik mana pun dalam timeline animasi secara instan, membuatnya sempurna untuk aplikasi di mana pengguna dapat menjelajahi animasi atau di mana frame mungkin terlewat. Sistem ini menggunakan prinsip fisika mass-spring-damper, memberikan gerakan yang terlihat natural dan merespons parameter seperti kekakuan dan peredaman dengan cara yang dapat diprediksi.

Catatan: Osilator harmonik teredam adalah sistem fisika yang menggambarkan bagaimana objek bergerak ketika terpasang pada pegas dengan gesekan, menciptakan gerakan memantul dan menetap yang realistis.

Keunggulan Solusi Bentuk Tertutup:

  • Kalkulasi instan untuk frame animasi apa pun
  • Tidak memerlukan simulasi langkah demi langkah
  • Hasil yang konsisten terlepas dari frame rate
  • Sempurna untuk timeline scrubbing dalam perangkat lunak animasi
  • Lebih efisien dibandingkan simulasi fisika iteratif
Sebuah grafik yang mengilustrasikan perilaku pantulan yang berbeda dari waktu ke waktu, menampilkan efek gerakan dalam sistem peredaman yang digunakan untuk animasi
Sebuah grafik yang mengilustrasikan perilaku pantulan yang berbeda dari waktu ke waktu, menampilkan efek gerakan dalam sistem peredaman yang digunakan untuk animasi

Pendekatan Parametrik Apple Menunjukkan Harapan

Penelitian Apple tentang fungsi easing kinematik mewakili arah lain untuk perbaikan. Sistem mereka menggunakan fungsi parametrik tunggal yang dapat disesuaikan untuk perilaku yang berbeda seperti antisipasi, overshoot, dan frekuensi osilasi. Meskipun lebih fleksibel daripada easing tradisional, developer melaporkan tantangan dengan ketergantungan parameter.

Frustrasi utama terletak pada bagaimana menyesuaikan satu parameter mempengaruhi yang lain. Mengubah jumlah osilasi mempengaruhi kecepatan animasi dan jarak overshoot, memerlukan penyesuaian parameter berganda untuk mencapai hasil yang diinginkan. Ini menciptakan alur kerja di mana animator menghabiskan lebih banyak waktu mengatur angka daripada fokus pada gerakan itu sendiri.

Parameter Animasi Berbasis Fisika:

  • Damping: Mengontrol seberapa cepat osilasi mereda
  • Frekuensi/Kekakuan: Menentukan seberapa cepat sistem merespons
  • Massa: Memengaruhi inersia dan momentum objek yang dianimasikan
  • Overshoot: Seberapa jauh melewati target animasi sebelum menetap

Komunitas Menjelajahi Metode Alternatif

Komunitas developer secara aktif bereksperimen dengan berbagai solusi. Beberapa developer beralih ke B-splines untuk karakteristik turunan kontinu dan gerakan halus mereka. Yang lain menjelajahi filter konvolusi dan sistem kontrol umpan balik yang dipinjam dari disiplin teknik.

Satu pendekatan yang sangat menarik melibatkan penggunaan dua target dalam sistem kontroler PD - target utama dan target antisipasi yang menciptakan gerakan wind-up natural. Metode ini menghasilkan antisipasi yang terlihat organik tanpa memerlukan penyetelan parameter yang kompleks, meskipun masih memerlukan implementasi yang hati-hati untuk menghindari diskontinuitas kecepatan.

Catatan: Kontroler PD adalah sistem umpan balik yang menyesuaikan gerakan berdasarkan perbedaan posisi dan kecepatan, umumnya digunakan dalam robotika dan sistem kontrol.

Pencarian Alat yang Lebih Baik

Diskusi ini mengungkapkan ketegangan fundamental antara kemudahan penggunaan dan kontrol kreatif. Meskipun fungsi easing saat ini bekerja dengan memadai untuk sebagian besar aplikasi, mereka tidak memberikan rentang ekspresif yang dibutuhkan animator untuk desain gerakan yang canggih. Komunitas tampaknya sangat tertarik pada solusi yang menawarkan kenyamanan parameterisasi dan fleksibilitas kurva kustom.

Dalam animasi tradisional, prinsip-prinsipnya hanya panduan; Anda masih berakhir menciptakan gerakan unik baru setiap kali berdasarkan akting apa yang diperlukan adegan. Fungsi easing dalam kode tidak cukup memberi Anda fleksibilitas untuk melakukan itu.

Pencarian alat animasi yang lebih baik berlanjut saat developer menyeimbangkan efisiensi komputasi dengan ekspresi kreatif. Baik melalui sistem berbasis fisika, parameterisasi yang diperbaiki, atau pendekatan yang sepenuhnya baru, tujuannya tetap sama: memberikan kreator alat untuk menghidupkan gerakan digital dengan nuansa dan variasi yang sama yang ditemukan dalam animasi tradisional.

Referensi: I'm unsatisfied with easing functions