Penjana Easing CSS
Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
Apakah fungsi easing dalam CSS?
Fungsi easing mengawal rentak kemajuan animasi atau transisi dari semasa ke semasa. Elemen tidak harus bergerak pada kelajuan malar: ia boleh bermula perlahan, memecut, melepasi sasaran sedikit dan kemudian stabil. Dalam CSS ia ditetapkan dengan sifat transition-timing-function atau animation-timing-function.
Apakah maksud empat nombor dalam cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) mentakrifkan lengkung melalui dua titik kawalan. Titik pertama membentuk permulaan gerakan dan titik kedua penghujungnya. X mewakili masa pada skala 0 hingga 1, dan Y mewakili kemajuan, dengan 0 sebagai nilai awal dan 1 sebagai nilai akhir.
Mengapa Y boleh di luar 0 hingga 1 tetapi X tidak?
X dipetakan kepada masa sebenar, jadi nilai bawah 0 atau atas 1 akan memecahkan kausaliti dan spesifikasi melarangnya. Y pula bebas: atas 1 melepasi sasaran dan bawah 0 mundur dahulu sebelum maju — begitulah pratetap Back mencipta rasa lantunan.
Apakah beza ease, ease-in dan ease-out?
ease ialah nilai lalai pelayar dengan mula dan pendaratan lembut; ease-in bermula perlahan dan tamat pantas; ease-out bermula pantas dan nyahpecut; ease-in-out menggabungkan kedua-duanya. Penjana ini turut menyertakan pratetap sine, quad, cubic, quart, expo, back dan material — jumlahnya 18.
Bagaimana pratonton bola berfungsi?
Dua bola berulang sepanjang tempoh yang anda tetapkan. Bola atas sentiasa bergerak dengan fungsi linear sebagai rujukan, manakala bola bawah mengikut lengkung anda. Jurang di antara mereka yang mengembang dan mengecut menunjukkan tepat apa yang diubah easing anda.
Ke mana nilai yang dijana ditampal?
Gunakannya sebagai nilai transition-timing-function atau animation-timing-function, contohnya transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Alat ini mengeluarkan fungsi cubic-bezier(...) tulen, sedia untuk mana-mana peraturan.
Adakah fungsi easing menjejaskan prestasi animasi?
Fungsi pengmasaan itu sendiri tanpa kos: ia hanya memetakan semula kemajuan mengikut masa. Prestasi bergantung pada sifat yang dianimasikan: transform dan opacity mesra GPU, manakala menganimasikan sifat susun atur seperti width atau top mencetus reflow mahal walau easing apa pun.
Bolehkah mencipta kesan lantunan atau kenyal sebenar?
Satu cubic-bezier hanya boleh melepasi sasaran sekali dan tidak menghasilkan lantunan berbilang kali seperti kesan bounce atau kenyal sebenar. Untuk itu, rangkaikan beberapa keyframe dalam @keyframes atau gunakan Web Animations API; manakala satu lepasan licin itulah kekuatan cubic-bezier dan tumpuan alat ini.
Adakah apa yang saya lakukan di sini dimuat naik?
Tidak. Lengkung dilukis pada canvas setempat dan animasi pratonton berjalan sepenuhnya dalam pelayar anda. Tiada apa dihantar ke pelayan, jadi penjana ini juga berfungsi luar talian selepas halaman dimuatkan.
Cara Menggunakan Penjana Easing CSS
Ukur arah lengkung easing CSS secara visual dan bukannya meneka nombor. Seret titik kawalan, bandingkan pergerakan anda dengan rujukan linear, dan salin cubic-bezier siap dengan satu klik. Semuanya berjalan setempat dalam pelayar anda.
- Pilih salah satu daripada 18 pratetap sebagai titik permulaan, seperti Ease Out, Expo Out atau Back Out.
- Seret kedua-dua pemegang pada lengkung: paksi X ialah masa dan mesti kekal antara 0 dan 1, paksi Y ialah kemajuan dan boleh melebihi.
- Haluskan koordinat P1 dan P2 yang tepat dengan medan nombor jika anda perlukan kejituan.
- Laraskan peluncur tempoh dan perhatikan dua bola yang berulang — yang berongga sentiasa linear, yang pekat menggunakan lengkung anda.
- Salin nilai cubic-bezier yang dijana ke dalam transition-timing-function atau animation-timing-function.
Dorong satu pemegang Y melebihi 1 untuk lebihan yang yakin, seperti cubic-bezier(0.34, 1.56, 0.64, 1) — membuatkan butang dan kad terasa kenyal tanpa sebarang keyframe.
Alat Berkaitan
- Penjana Gradien CSS Cipta gradien CSS menakjubkan secara visual. Jana gradien linear, radial dan konikal dengan pelbagai henti warna, sudut dan kedudukan tersuai. Salin kod CSS sedia pengeluaran serta-merta.
- Penjana Loader CSS Penjana loader CSS percuma: sepuluh spinner pemuatan CSS tulen dengan kawalan saiz, kelajuan, ketebalan dan warna secara langsung, kemudian salin HTML dan CSS sedia tampal.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Text Shadow CSS Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.
- Penjana Clip Path CSS Penjana clip-path CSS dalam talian percuma. Reka bentuk polygon, circle, ellipse dan inset dengan titik boleh seret, pratonton langsung dan salin kod CSS sekali klik.
- Pengindah CSS Format dan indahkan kod CSS serta-merta. Tukar CSS yang diminifikasi kepada kod mudah dibaca dengan pilihan boleh disesuaikan.
- Peminit CSS Peminit CSS dalam talian percuma. Mampat dan optimumkan kod CSS serta-merta dengan membuang ruang putih, komen dan aksara tidak perlu. Kurangkan saiz fail untuk prestasi web lebih pantas.