Easing kustom

Keluarlah dan buat animasi yang benar-benar kustom untuk proyek Anda.

Terkadang Anda tidak ingin menggunakan kata kunci easing yang disertakan dengan CSS, atau Anda akan menggunakan Animasi Web atau kerangka kerja JavaScript. Dalam hal ini, Anda biasanya bisa menentukan kurva (atau persamaan), dan ini memberikan banyak kontrol atas nuansa animasi proyek Anda.

Ringkasan

  • Easing kustom memungkinkan Anda memberikan lebih banyak kepribadian untuk proyek Anda.
  • Anda dapat membuat kurva cubic Bézier yang menyerupai kurva animasi default (ease-out, easy-in, dll.), tetapi dengan penekanan di tempat yang berbeda.
  • Gunakan JavaScript saat Anda membutuhkan lebih banyak kontrol atas pengaturan waktu dan perilaku animasi, misalnya, animasi elastis atau memantul.

Jika membuat animasi dengan CSS, Anda akan mendapati bahwa Anda dapat menentukan kurva cubic Bézier untuk menentukan waktunya. Faktanya, kata kunci ease, ease-in, ease-out, dan linear dipetakan ke kurva Bézier yang telah ditentukan sebelumnya, yang dijelaskan secara mendetail dalam spesifikasi transisi CSS dan spesifikasi Animasi Web.

Kurva Bézier ini mengambil empat nilai, atau dua pasang angka, dengan setiap pasangan menggambarkan koordinat X dan Y dari titik kontrol kurva kubik Bézier. Titik awal kurva Bézier memiliki koordinat (0, 0) dan titik akhir memiliki koordinat (1, 1); Anda bisa mengatur nilai X dan Y dari dua titik kontrol. Nilai X untuk dua titik kontrol harus antara 0 dan 1, dan nilai Y setiap titik kontrol dapat melebihi batas [0, 1], meskipun spesifikasinya tidak jelas seberapa banyak.

Mengubah nilai X dan Y setiap titik kontrol memberi Anda kurva yang sangat berbeda, dan karena itu memberikan nuansa yang sangat berbeda pada animasi Anda. Misalnya, jika titik kontrol pertama berada di area kanan bawah, animasi akan dimulai dengan lambat. Jika ada di area kiri atas, animasi akan dimulai dengan cepat. Sebaliknya, jika titik kontrol kedua berada di area kanan bawah grid, animasi akan cepat di bagian akhir; jika di kiri atas, animasi akan lambat untuk diakhiri.

Sebagai perbandingan, berikut adalah dua kurva: kurva easy-in-out biasa dan kurva kustom:

Kurva animasi {i>easing-in-out<i}.

Kurva animasi kustom.

Melihat animasi dengan easing kustom

CSS untuk kurva kustom adalah:

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

Dua angka pertama adalah koordinat X dan Y dari titik kontrol pertama, dan dua angka kedua adalah koordinat X dan Y dari titik kontrol kedua.

Membuat kurva kustom sangat menyenangkan, dan memberi Anda kontrol yang signifikan atas nuansa animasi. Misalnya, dengan kurva di atas, Anda dapat melihat bahwa kurva menyerupai kurva easy-in-out klasik, tetapi dengan easy-in yang dipersingkat, atau bagian "memulai", dan perlambatan yang memanjang di bagian akhir.

Lakukan eksperimen dengan alat kurva animasi ini dan lihat pengaruh kurva terhadap nuansa animasi.

Menggunakan framework JavaScript untuk lebih banyak kontrol

Terkadang Anda membutuhkan lebih banyak kontrol daripada yang dapat diberikan oleh kurva cubic Bézier. Jika Anda ingin efek memantul elastis, Anda dapat mempertimbangkan menggunakan kerangka kerja JavaScript, karena ini adalah efek yang sulit dicapai dengan CSS atau Animasi Web.

TweenMax

Salah satu framework yang canggih adalah TweenMax dari GreenSock (atau TweenLite jika ingin membuat semuanya tetap sangat ringan), karena Anda mendapatkan banyak kontrol darinya dalam library JavaScript yang kecil, dan codebase yang sangat matang.

Lihat animasi easing elastis

Untuk menggunakan TweenMax, sertakan skrip ini di halaman Anda:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Setelah skrip terpasang, Anda bisa memanggil TweenMax terhadap elemen dan memberi tahu properti mana yang Anda inginkan, beserta tiap easing yang Anda inginkan. Ada banyak opsi easing yang bisa Anda gunakan; kode di bawah menggunakan easy-out elastis:

    var box = document.getElementById('my-box');
    var animationDurationInSeconds = 1.5;

    TweenMax.to(box, animationDurationInSeconds, {
      x: '100%',
      ease: 'Elastic.easeOut'
    });

Dokumentasi TweenMax menjelaskan semua opsi yang ada di sini, jadi sangat layak dibaca.