CSS Cubic-Bezier ģenerators

Šis rīks ļauj veidot pielāgotu CSS cubic-bezier() izlīdzināšanas līkni ar četriem slīdņiem un priekšskatīt to tiešraidē pirms koda kopēšanas. Pielāgo x1, y1, x2 un y2 kontrolpunktu vērtības, vēro, kā līkne un kustīgais priekšskatījuma elements uzreiz atjaunojas, tad kopē transition-timing-function: cubic-bezier(...) tieši savā stilu failā.

Kas ir šis rīks?

cubic-bezier() ir CSS laika funkcija, kas kontrolē, kā animēta vai pārejoša vērtība paātrinās un palēninās laika gaitā, nevis pārvietojas ar konstantu ātrumu. Tā tiek definēta ar diviem kontrolpunktiem — (x1, y1) un (x2, y2) —, kas izliec līkni starp fiksētu sākuma punktu (0,0) un beigu punktu (1,1). x vērtībām jāpaliek starp 0 un 1, taču y vērtības var iziet ārpus šī diapazona, lai radītu pārsvara vai atlēkšanas efektus.

Rakstot ar rokām, četru decimālskaitļu pielāgošana, lai sasniegtu izjūtu, kas nav ne pārāk asa, ne pārāk gausa, prasa daudz mēģinājumu un kļūdu. Šis rīks aizstāj šo minēšanu ar tiešu manipulāciju: velc slīdni, vēro, kā līkne izliecas un priekšskatījuma bumbiņa pārvietojas atbilstoši, un kopē CSS, kad kustība šķiet pareiza.

Avots: CSS Easing Functions Level 1, W3C — specifikācija, kas definē cubic-bezier() un piecus nosauktos atslēgvārdus, uz kuriem balstās šī rīka veidnes.

Kāpēc to izmantot?

Tiešraides SVG grafiks precīzi parāda, kā tava līkne izliecas starp fiksētajiem sākuma un beigu punktiem, ar abiem kontrolpunktiem un to rokturiem uzzīmētiem skaidrības labad.
Atskaņošanas poga animē priekšskatījuma elementu pa trasi, izmantojot tavu precīzo līkni, lai tu varētu izjust kustību, nevis tikai redzēt statisku grafiku.
Viena klikšķa veidnes piecām standarta nosauktajām izlīdzināšanas funkcijām — ease, ease-in, ease-out, ease-in-out un linear — kā dokumentēts CSS Easing Functions specifikācijā.
Y vērtības var iet zem 0 vai virs 1, ļaujot veidot pārsvara/atlēkšanas stila izlīdzinājumus, ko nosauktie atslēgvārdi nespēj radīt.
Izvada gatavu ielīmēšanai transition-timing-function CSS — tā pati vērtība darbojas arī animation-timing-function.
Darbojas pilnībā tavā pārlūkā — nekas no tavas konfigurācijas nekur netiek augšupielādēts. Bezmaksas, nav reģistrācijas.

Kā to lietot

Velc x1/y1 slīdņus, lai iestatītu pirmo kontrolpunktu, kas veido animācijas sākumu.
Velc x2/y2 slīdņus, lai iestatītu otro kontrolpunktu, kas veido animācijas beigas.
Vēro melno līkni grafikā — līkne, kas agri izspiežas virs diagonāles, nozīmē, ka kustība sākas ātri, bet tāda, kas paliek zem tās, nozīmē, ka kustība sākas lēni.
Klikšķini Play, lai redzētu, kā priekšskatījuma elements pārvietojas pa trasi, izmantojot tavu līkni kā transition-timing-function.
Izmēģini veidni (ease, ease-in, ease-out, ease-in-out, linear) kā sākumpunktu, tad pielāgo slīdņus no turienes.
Kopē ģenerēto CSS un ievieto to transition vai animation noteikumā.

Piemērs

Ievade

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Izvade

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Šī ir standarta CSS ease atslēgvārda vērtība, izrakstīta kā skaidri kontrolpunkti — ātrs sākums, straujš paātrinājums, tad pakāpeniska palēnināšanās virzienā uz beigām.

Kāpēc y vērtības var pārsniegt 0–1

Atšķirībā no x ass, kas apzīmē laiku un tai jāiet no 0 līdz 1, y ass apzīmē animētās vērtības progresu un tai nav šāda ierobežojuma. Iestatot y1 zem 0 vai y2 virs 1, līkne nogrimst zem sākuma vērtības vai pārsniedz beigu vērtību pirms nostabilizēšanās — tas ir pamats pārsvara un priekšlaicīgas kustības efektiem, ko izmanto pogu nospiešanā, modāļu parādīšanā un rotaļīgās UI mikromijiedarbībās. Neviens no pieciem nosauktajiem atslēgvārdiem (ease, ease-in, ease-out, ease-in-out, linear) to nespēj radīt; tam vajadzīga pielāgota cubic-bezier().

transition-timing-function pretstatā animation-timing-function

Šī rīka ģenerētā cubic-bezier() vērtība darbojas identiski abās īpašībās. Izmanto transition-timing-function, kad kustību izraisa stāvokļa maiņa (piemēram, hover vai klases pārslēgšana), un animation-timing-function @keyframes vadītā animācijas noteikumā, kad tev vajadzīga tā pati izlīdzināšanas izjūta, kas piemērota automātiski vai ciklā.

Izplatīti izlīdzināšanas modeļi

Straujš UI atgriezeniskais efekts (pogas, pārslēdzēji): turi kontrolpunktus tuvu diagonālei ar nelielu ease-out novirzi, piem., cubic-bezier(0.4, 0, 0.2, 1).
Material Design standarta līkne: cubic-bezier(0.4, 0, 0.2, 1) — ātrs sākums, maigas beigas, plaši izmantota paneļu un kartīšu pārejām.
Atlēkšana/pārsvars: paceļ y2 virs 1, piem., cubic-bezier(0.34, 1.56, 0.64, 1), rotaļīgai parādīšanās izjūtai.
Priekšlaicīga kustība pirms pārvietošanās: paceļ y1 zem 0, lai elements nedaudz atvelkas atpakaļ, pirms pārvietojas uz priekšu.
Gluda ease-in-out ciklojošām animācijām: turi līkni tuvu simetriskai ap centru.

Kombinēšana ar citiem CSS rīkiem

Izlīdzināšanas līkne reti stāv viena pati — to parasti pielieto elementam, kuram vajadzīgas arī ēnas, noapaļoti stūri vai definēti gradienti. Izveido vizuālo noformējumu ar citiem CSS rīkiem zemāk, tad pievieno laika funkciju no šī rīka tai pašai kārtulai vai transition/animation deklarācijai.

→ Box Shadow ģenerators · Border Radius ģenerators

Biežāk uzdotie jautājumi

Ko īsti nozīmē četri skaitļi cubic-bezier()?

Tās ir divu kontrolpunktu koordinātas, (x1, y1) un (x2, y2), kas izliec Bezjē līkni, kura sākas fiksētā sākuma punktā (0,0) un beidzas fiksētā beigu punktā (1,1). X ass apzīmē pagājušo laiku (0 līdz 1), bet y ass apzīmē, cik tālu animētā īpašība ir progresējusi, tāpēc x1 un x2 jāpaliek diapazonā 0–1, kamēr y1 un y2 var iziet ārpus šī diapazona.

Kāda ir atšķirība starp ease, ease-in, ease-out un ease-in-out?

ease (CSS noklusējums) sākas ātri, tad maigi palēninās. ease-in sākas lēni un paātrinās virzienā uz beigām, noderīgs elementiem, kas pamet ekrānu. ease-out sākas ātri un palēninās, noderīgs elementiem, kas ienāk ekrānā. ease-in-out ir lēns abos galos un ātrāks vidū, radot gludu, simetrisku izjūtu.

Vai varu izmantot vienu un to pašu cubic-bezier() vērtību gan pārejām, gan animācijām?

Jā. transition-timing-function un animation-timing-function pieņem tieši to pašu cubic-bezier() sintaksi un rada to pašu izlīdzināšanas līkni — vienīgā atšķirība ir tas, kurai CSS funkcijai (pārejai vai keyframes animācijai) šī laika funkcija ir piesaistīta.

Kāpēc mana līkne izskatās salauzta, kad y1 vai y2 ir ļoti liels vai negatīvs?

Tas ir gaidāms — y vērtību pastumšana tālu ārpus 0–1 rada spēcīgu pārsvaru, kur animētā vērtība ievērojami pārsniedz mērķi pirms nostabilizēšanās. Tas ir derīgs un bieži vien apzināts efekts, taču, ja tas izskatās nevēlams, atgriez y1 un y2 tuvāk 0–1 diapazonam.

Vai pielāgota līkne ir labāka nekā tikai nosaukto atslēgvārdu izmantošana?

Ne vienmēr — pieci atslēgvārdi (ease, ease-in, ease-out, ease-in-out, linear) sedz vairumu ikdienas vajadzību un ir vieglāk lasāmi kodā. Izmanto pielāgotu cubic-bezier(), kad vajadzīga specifiska izjūta, ko atslēgvārdi nesniedz, piemēram, atlēkšana, asāks efekts vai atbilstība konkrētai dizaina sistēmas kustības specifikācijai.