Dasar-dasar easing

Pelajari cara memperhalus dan memberikan bobot pada animasi Anda.

Paul Lewis

Tidak ada yang bergerak secara linear dari satu titik ke titik lain di alam. Pada kenyataannya, objek cenderung berakselerasi atau melambat saat bergerak. Otak kita terbiasa mengharapkan gerakan semacam ini, jadi saat membuat animasi, Anda harus menggunakan hal ini untuk keuntungan Anda. Gerakan alami membuat pengguna merasa lebih nyaman dengan aplikasi Anda, yang pada akhirnya akan menghasilkan pengalaman keseluruhan yang lebih baik.

Ringkasan

• Transisi membuat animasi Anda terasa lebih alami.
• Pilih animasi perlambatan untuk elemen UI.
• Hindari animasi ease-in atau ease-in-out kecuali jika Anda dapat membuatnya singkat; animasi ini cenderung terasa lambat bagi pengguna akhir.

Dalam animasi klasik, istilah untuk gerakan yang dimulai dengan lambat dan dipercepat adalah "slow in", dan untuk gerakan yang dimulai dengan cepat dan melambat adalah "slow out". Terminologi yang paling umum digunakan di web untuk hal ini adalah “percepatan” dan “perlambatan”. Terkadang keduanya digabungkan, yang disebut "ease in out". Jadi, easing adalah proses membuat animasi menjadi lebih halus atau jelas.

Kata kunci pelonggaran

Transisi dan animasi CSS memungkinkan Anda memilih jenis easing yang ingin digunakan untuk animasi. Anda dapat menggunakan kata kunci yang memengaruhi easing (atau terkadang disebut timing) animasi yang dimaksud. Anda juga dapat menyesuaikan easing sepenuhnya, yang memberi Anda lebih banyak kebebasan untuk mengekspresikan karakteristik aplikasi Anda.

Berikut beberapa kata kunci yang dapat Anda gunakan di CSS:

• linear
• ease-in
• ease-out
• ease-in-out

Sumber: CSS Transitions, W3C

Anda juga dapat menggunakan kata kunci steps, yang memungkinkan Anda membuat transisi yang memiliki langkah-langkah terpisah, tetapi kata kunci yang tercantum di atas adalah yang paling berguna untuk membuat animasi yang terasa alami.

Animasi linear

Animasi tanpa jenis easing apa pun disebut sebagai linear. Grafik transisi linear terlihat seperti ini:

Seiring berjalannya waktu, nilai akan meningkat dalam jumlah yang sama. Dengan gerakan linear, elemen cenderung terasa kaku dan tidak alami, dan hal ini dapat mengganggu pengguna. Secara umum, Anda harus menghindari gerakan linear.

Baik Anda membuat kode animasi menggunakan CSS atau JavaScript, Anda akan mendapati bahwa selalu ada opsi untuk gerakan linear.

Melihat animasi linear

Untuk mencapai efek di atas dengan CSS, kodenya akan terlihat seperti ini:

transition: transform 500ms linear;

Animasi perlambatan

Easing out menyebabkan animasi dimulai lebih cepat daripada animasi linear, dan juga mengalami perlambatan di akhir.

Easing out biasanya merupakan yang terbaik untuk pekerjaan antarmuka pengguna, karena awal yang cepat memberikan kesan responsif pada animasi Anda, sekaligus memungkinkan perlambatan alami di akhir.

Melihat animasi perlambatan

Ada banyak cara untuk mencapai efek ease out, tetapi yang paling sederhana adalah kata kunci ease-out di CSS:

transition: transform 500ms ease-out;

Animasi percepatan

Animasi percepatan dimulai dengan lambat dan berakhir dengan cepat, yang merupakan kebalikan dari animasi perlambatan.

Jenis animasi ini seperti batu berat yang jatuh, yang dimulai dengan lambat dan menghantam tanah dengan cepat dan menimbulkan bunyi keras.

Namun, dari sudut pandang interaksi, ease-in dapat terasa sedikit tidak biasa karena berakhir secara tiba-tiba; hal-hal yang bergerak di dunia nyata cenderung melambat, bukan sekadar berhenti tiba-tiba. Ease-in juga memiliki efek merugikan, yaitu terasa lambat saat dimulai, yang berdampak negatif pada persepsi responsivitas di situs atau aplikasi Anda.

Melihat animasi percepatan

Untuk menggunakan animasi ease-in, mirip dengan animasi ease-out dan linear, Anda dapat menggunakan kata kuncinya:

transition: transform 500ms ease-in;

Animasi ease-in-out

Easing in dan easing out mirip dengan mobil yang berakselerasi dan melambat, dan jika digunakan dengan bijak, dapat memberikan efek yang lebih dramatis daripada sekadar easing out.

Jangan gunakan durasi animasi yang terlalu lama, karena lambatnya awal animasi yang menggunakan percepatan. Rentang sekitar 300-500 md biasanya sesuai, tetapi angka pastinya sangat bergantung pada nuansa project Anda. Meskipun demikian, karena awal yang lambat, tengah yang cepat, dan akhir yang lambat, ada peningkatan kontras dalam animasi, yang dapat cukup memuaskan bagi pengguna.

Melihat animasi percepatan-perlambatan

Untuk mendapatkan animasi ease-in-out, Anda dapat menggunakan kata kunci CSS ease-in-out:

transition: transform 500ms ease-in-out;