Membuat kurva animasi yang kompleks di CSS dengan fungsi easing linear()

Memperkenalkan linear(), fungsi easing di CSS yang berinterpolasi secara linear di antara titik-titiknya, memungkinkan Anda membuat ulang efek pantulan dan pegas.

Bramus

Easing di CSS

Saat menganimasikan atau mentransisikan elemen dalam CSS, Anda dapat mengontrol tingkat perubahan nilai dengan fungsi easing menggunakan properti animation-timing-function dan transition-timing-function.

Ada beberapa kata kunci yang tersedia sebagai preset di CSS, yaitu linear, ease, ease-in, ease-out, dan ease-in-out. Untuk membuat kurva easing Anda sendiri, gunakan fungsi cubic-bezier(), atau ambil pendekatan berbasis langkah menggunakan fungsi easing steps().

Jika digunakan dengan tepat, easing memberikan kesan bobot pada elemen animasi karena elemen ini tampak mengumpulkan momentum.

Membuat kurva yang kompleks seperti efek memantul atau pegas tidak mungkin dilakukan di CSS, tetapi berkat linear(), Anda kini dapat memperkirakannya dengan sangat baik.

Pengantar linear()

Cara baru untuk menentukan easing di CSS adalah dengan linear(). Fungsi ini menerima sejumlah perhentian, yang dipisahkan dengan koma. Setiap perhentian adalah satu angka yang berkisar dari 0 sampai 1. Di antara setiap perhentian, interpolasi dilakukan secara linear, dengan menjelaskan nama fungsi.

animation-timing-function: linear(0, 0.25, 1);

Perhentian ini secara default tersebar dengan jarak yang sama. Dalam cuplikan sebelumnya, hal tersebut berarti nilai output 0.25 akan digunakan pada tanda 50%.

Divisualisasikan, grafik untuk linear(0, 0.25, 1) akan terlihat seperti ini:

Jika tidak ingin perhentian tersebar dengan jarak yang sama, Anda dapat memilih untuk meneruskan panjang perhentian. Saat meneruskan satu nilai sebagai panjang perhentian, Anda menentukan titik awalnya:

animation-timing-function: linear(0, 0.25 75%, 1);

Di sini, nilai output 0.25 tidak akan digunakan pada tanda 50%, tetapi pada 75%.

Saat menetapkan dua nilai sebagai panjang perhentian, Anda menentukan titik awal dan titik akhirnya:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Nilai output 0,25 akan digunakan dari 25% hingga 75% dalam waktu.

Membuat kurva kompleks dengan linear()

Meskipun contoh di atas adalah easing yang sangat sederhana, Anda dapat menggunakan linear() untuk membuat ulang fungsi easing yang kompleks dengan cara yang sangat sederhana, dengan risiko kehilangan beberapa presisi.

Ambil kurva easing memantul ini, jenis easing yang tidak bisa dinyatakan secara langsung di CSS, didefinisikan menggunakan JavaScript:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Meskipun kodenya mungkin tidak memberi tahu Anda banyak, visualisasi mungkin. Inilah outputnya, yang divisualisasikan sebagai kurva biru:

Kurva dapat disederhanakan dengan menambahkan sejumlah perhentian padanya. Di sini, setiap titik hijau menunjukkan perhentian:

Saat diteruskan ke linear(), hasilnya adalah kurva yang agak terlihat seperti aslinya, tetapi sedikit lebih kasar di bagian tepinya.

Bandingkan kotak animasi hijau dengan yang biru, Anda tahu itu tidak semulus kotak animasi itu.

Namun, jika Anda menambahkan cukup perhentian, Anda dapat memperkirakan kurva aslinya dengan cukup baik. Berikut ini versi yang telah diperbarui:

Hanya dengan meningkatkan jumlah perhentian, Anda sudah mendapatkan hasil yang lancar.

Kode yang digunakan untuk menganimasikan terlihat seperti ini:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Alat untuk membantu

Membuat daftar perhentian ini secara manual akan sangat rumit. Untungnya, Jake dan Adam telah membuat alat untuk membantu Anda mengonversi kurva easing menjadi pasangan linear()-nya.

Alat ini menggunakan fungsi easing JavaScript atau kurva SVG sebagai inputnya, dan menghasilkan output kurva yang disederhanakan menggunakan linear(). Gunakan penggeser untuk mengontrol jumlah perhentian yang Anda inginkan, dan presisinya.

Di kanan atas, Anda juga dapat memilih salah satu preset: Pegas, Pantulan, Elastis sederhana, atau easing yang ditonjolkan Desain Material disertakan.

Dukungan DevTools

Dukungan yang tersedia di DevTools adalah dukungan untuk memvisualisasikan dan mengedit hasil linear(). Klik ikon untuk menampilkan tooltip interaktif yang memungkinkan Anda menarik perhentian.

Fitur DevTools ini tersedia di pengiriman DevTools dengan Chrome 114.

Foto oleh Howie Mapson di Unsplash