Apa itu Easing?

Salah satu rahasia dari animasi yang terlihat mengalir adalah percepatan dan perlambatan. Bahkan mobil sport yang paling canggih memerlukan waktu untuk meningkatkan kecepatan. Begitu juga dengan tangan Anda, ketika Anda melambaikan tangan.

Proses peningkatan dan penurunan kecepatan secara perlahan pada animasi disebut easing. Secara kontras, kami mengacu kepada gerakan dengan kecepatan konstan sebagai linear.

Animasi menggunakan timing linear

Gerakan linear tampak tidak alami karena terlihat berbeda dengan bagaimana gerakan terjadi di dunia nyata. Bandingkan animasi di atas yang menggunakan timing linear dengan animasi di bawah yang menggunakan timing easing.

Animasi menggunakan timing ease-out

Pada animasi yang kedua, easing diterapkan untuk menyebabkan gerakan bertahap menjadi pelan daripada berhenti dengan tiba-tiba.

Terdapat berbagai macam easing, dan berikut merupakan tiga jenis easing yang paling umum:

• Ease-in: easing ke dalam animasi berarti sesuatu mulai secara perlahan. Dengan kata lain, animasi mulai secara perlahan dan semakin cepat, seperti roket yang sedang lepas landas. Easing semacam ini cocok untuk objek yang meninggalkan layar.
• Ease-out: easing ke luar dari animasi berarti sesuai selesai secara perlahan. Dengan kata lain, animasi beranjak pelan sedikit demi sedikit hingga berhenti, seperti kereta yang tiba di stasiun. Easing semacam ini bagus untuk objek yang bergerak masuk ke layar.
• Ease-in-out: Ketika animasi mulai pelan, mempercepat, kemudian pelan lagi hingga berhenti. Easing ini merupakan kombinasi easing masuk dan easing keluar. Easing ini sangat berguna untuk objek yang bergerak dari satu tempat dari satu tempat di layar ke tempat yang lain. (Kecuali jika animasi tampak seperti jatuh, yang mana easing keluar akan menyebabkannya menjadi berhenti mendadak).
•  

Bagaimana cara menggunakan Easing?

Anda dapat menerapkan easing ke properti apa pun yang mendukung keyframe, termasuk lokasi, skala, rotasi, warna, opacity, dan berbagai parameter efek. Di sini, kita akan melihat teknik easing untuk pemindahan lokasi layer, dan langkah-langkah serupa juga dapat digunakan untuk menerapkan easing ke properti lainnya.

Langkah 1: Keyframe

Sebelum mengatur kurva easing, dibutuhkan setidaknya dua keyframe. 

Pastikan bahwa keyframe tersebut telah diatur untuk properti lokasi—keyframe akan terlihat berbentuk wajik berwarna putih dengan garis tepi berwarna hitam, seperti ini: 

Keyframe untuk properti saat ini (benar)

Bila keyframe terlihat samar dan tanpa garis tepi, hal ini berarti properti yang sedang dipilih adalah properti yang berbeda dengan properti yang tersambung dengan keyframe tersebut (misalnya, keyframe tersebut merupakan keyframe rotasi, namun Anda sedang memilih skala).

Keyframe untuk properti yang berbeda (salah)

Jika Anda melihat keyframe yang salah, silakan pindah ke properti yang benar sebelum mengedit kurva easing.

Langkah 2: Buka Editor Kurva

Untuk membuka editor kurva, ketuk ikon Kurva.

Langkah 3: Gulir Playhead di antara Keyframe

Gulir timeline sehingga playhead (garis putih vertikal yang terlihat) berada di antara dua keyframe.

Kurva hanya akan terlihat jika
playhead berada di antara keyframe

Langkah 4: Mengatur Kurva

Ada dua cara untuk mengatur kurva.

Anda dapat memilih dari tombol preset yang ditampilkan di sebelah kanan:

Anda juga bisa menyeret pegangan putih untuk mengatur kurva Anda sendiri:

Ketika mengatur kurva secara manual, sumbu X mewakili waktu proyek yang asli, dan sumbu Y mengindikasikan waktu pemetaan ulang sebenarnya yang diterapkan di animasi.

Bagian sebelah kiri adalah permulaan dari animasi, dan bagian sebelah kanan adalah akhir dari animasi. Kecepatan akan ditentukan oleh kemiringan dari kurva. Semakin curam kemiringan menyimbolkan semakin cepat pergerakan, seperti yang ditunjukkan pada diagram di atas.

Beberapa Keyframe

Apabila terdapat lebih dari dua keyframe, terdapat juga kurva easing terpisah untuk setiap pasang keyframe. 

Pada contoh di atas, ada tiga keyframe, berarti ada dua kurva easing. Kurva easingnya akan berjumlah satu lebih sedikit dari jumlah keyframe yang ada.

Tipe Easing yang Lebih Canggih

Selain kurva easing Cubic Bezier standar (dengan dua pegangan), ada juga tipe easing yang lebih canggih untuk menganimasikan layer, seperti bounce (pantulan), elasticity (elastisitas), stepped motion (gerakan berlangkah seperti detak jarum jam), dan masih banyak lagi. Eksplor tipe easing canggih untuk membuat animasi menarik dengan mudah!

• Bounce: Easing bounce memiliki animasi seperti pengaruh gravitasi, jatuh ke nilai terakhir lalu kembali lagi dengan gerakan memantul. Gravitasi, dalam hal ini, adalah terhadap nilai akhir, dan tidak harus mengarah ke bawah–atau bahkan memiliki arah apapun (misalnya, sebuah warna).
• Elastic: Easing elastic membuat animasi mirip pegas yang dengan cepat lompat melewati nilai akhir, lalu kembali diam ke tempatnya sendiri.
• Cyclic: Easing cyclic mengulang sekuens antara nilai awal dan akhir. Tipe easing ini dapat digunakan untuk membuat animasi yang berulang maju dan mundur, atau bahkan animasi yang hanya berulang satu arah.
• Acak: Easing acak memberikan elemen acak yang terkontrol pada sekuens animasi, mirip dengan efek gerakan Brownian.
• Steps: Easing steps menganimasikan dengan interval diskret. Easing ini agak mirip dengan efek Kuantisasi Waktu, namun memberikan kontrol lebih dan dapat diaplikasikan ke properti individual daripada satu layer secara keseluruhan sekaligus.
• Elastic Steps: Easing ini mirip dengan easing steps, namun dengan pantulan elastis pada tiap langkah daripada easing yang lancar. 

Overshoot

Secara default, kurva easing dibatasi di dalam garis-garis bertitik untuk menghindari animasi yang melebihi nilai keyframe di sekitarnya, yang dapat menyebabkan hasil yang tak diinginkan. Namun, dalam skenario tertentu, Anda mungkin ingin melampaui nilai keyframe untuk gerakan tertentu, seperti antisipasi atau pantulan kembali. 

Hal ini dapat dicapai dengan mengaktifkan overshoot dari tombol menu overflow •••. Jika sudah diaktifkan, pegangan akan dapat diseret melebihi garis-garis bertitik. Bila Anda ingin kembali ke pengaturan default, Anda juga bisa menonaktifkan overshoot dari tombol menu overflow ••• yang sama.

Menyalin Kurva

Bila Anda ingin menggunakan ulang kurva easing pada pasangan keyframe lain (atau pada layer lain), cukup ketuk tombol menu overflow ••• di samping kurva:

Anda dapat menyalin kurva, lalu menggulir ke pasangan keyframe lain (atau pergi ke pasangan keyframe di properti atau layer lain), lalu menggunakan menu yang sama untuk menempel pengaturan kurva yang sama persis.

Anda juga dapat menggunakan Tempel Kurva ke Semua Bingkai Utama untuk memperbarui kurva pada semua pasangan keyframe di properti yang terpilih (properti lainnya dan layer lainnya tidak akan terpengaruh).

Kami juga memiliki video Pengenalan terhadap Easing pada kanal YouTube kami, yang dapat ditonton di sini:

Silakan tonton video ini apabila Anda ingin melihat video penjelasan mengenai Easing. Selamat mencoba!