Memperkenalkan linear(), fungsi easing di CSS yang berinterpolasi secara linear di antara titik-titiknya, sehingga Anda dapat membuat ulang efek pantulan dan pegas.
Easing di CSS
Saat menganimasikan atau mentransisikan elemen di CSS, Anda mengontrol kecepatan 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 lakukan pendekatan berbasis langkah menggunakan fungsi easing steps().
Bila digunakan dengan tepat, easing memberikan elemen animasi kesan bobot saat muncul untuk mengumpulkan momentum.
Pembuatan kurva kompleks seperti efek pantulan atau pegas tidak mungkin dilakukan di CSS, tetapi berkat linear(), Anda sekarang dapat memperkirakannya dengan sangat baik.
Pengantar ke linear()
Dukungan Browser
- 113
- 113
- 112
- x
Cara baru untuk menentukan easing di CSS adalah dengan linear(). Fungsi ini menerima sejumlah perhentian, yang dipisahkan dengan koma. Setiap perhentian merupakan satu angka yang berkisar antara 0 hingga 1. Di antara setiap perhentian, interpolasi dilakukan secara linier, yang menjelaskan nama fungsi.
animation-timing-function: linear(0, 0.25, 1);
Perhentian ini secara default tersebar secara sama. Dalam cuplikan sebelumnya, itu berarti nilai output 0.25 akan digunakan pada tanda 50%.
Divisualisasikan, grafik untuk linear(0, 0.25, 1) terlihat seperti ini:
Jika Anda tidak ingin perhentian tersebut tersebar secara merata, Anda dapat secara opsional 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 akhirnya:
animation-timing-function: linear(0, 0.25 25% 75%, 1);
Nilai output 0,25 akan digunakan dari 25% menjadi 75% dalam waktu tertentu.
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 kompromi kehilangan beberapa presisi.
Ambil kurva easing memantul ini, jenis easing yang tidak bisa diekspresikan secara langsung dalam 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 banyak hal, visualisasi mungkin. Berikut output-nya, 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 terlihat seperti yang asli, tetapi sedikit lebih kasar di bagian tepi.
Bandingkan kotak animasi hijau dengan yang biru, Anda dapat membedakannya dengan baik.
Namun, jika jumlah perhentian cukup, Anda bisa memperkirakan kurva aslinya dengan cukup baik. Berikut versi terbarunya:
Dengan hanya menggandakan jumlah perhentian, Anda sudah mendapatkan hasil yang mulus.
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().
Alat ini mengambil 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 serta presisinya.
Di kanan atas, Anda juga dapat memilih salah satu preset: Pegas, Pantulan, Elastis sederhana, atau easing yang ditekankan pada Desain Material.
Dukungan DevTools
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 dalam pengiriman DevTools dengan Chrome 114.
Foto oleh Howie Mapson di Unsplash