CSS Cubic-Bezier gervill

Hvað er þetta verkfæri?

cubic-bezier() er CSS-tímasetningarfall sem stjórnar því hvernig hreyfð eða umbreytt gildi hraðar og hægir á sér yfir tíma, í stað þess að hreyfast á jöfnum hraða. Það er skilgreint af tveimur stýripunktum — (x1, y1) og (x2, y2) — sem sveigja feril milli fasts upphafspunkts (0,0) og fasts endapunkts (1,1). X-gildin verða að vera á milli 0 og 1, en y-gildin geta farið út fyrir það bil til að skapa yfirskots- eða skopp-áhrif.

Þegar þetta er skrifað í höndunum tekur það mikla tilraunavinnu að stilla fjórar tugatölur til að ná fram tilfinningu sem er hvorki of snögg né of mjúk. Þetta verkfæri kemur í stað þeirrar ágiskunar með beinni stýringu: dragðu sleða, sjáðu ferilinn sveigjast og forskoðunarkúluna hreyfast í samræmi við það, og afritaðu kóðann þegar hreyfingin er orðin rétt.

Heimild: CSS Easing Functions Level 1, W3C — staðallinn sem skilgreinir cubic-bezier() og nöfnu lykilorðin fimm sem forstillingar þessa verkfæris byggja á.

Af hverju að nota það?

• Lifandi SVG-graf sýnir nákvæmlega hvernig ferillinn þinn sveigist milli fasta upphafs- og endapunktsins, með báða stýripunktana og handföng þeirra teiknuð til skýringar.
• Spilunarhnappurinn hreyfir forskoðunarþátt eftir braut með nákvæmum ferlinum þínum, svo þú getir fundið hreyfinguna en ekki bara séð stöðugt graf.
• Forstillingar með einum smelli fyrir hinar fimm stöðluðu, nafngreindu hraðabreytingaraðgerðir — ease, ease-in, ease-out, ease-in-out og linear — eins og þær eru skjalfestar í CSS Easing Functions staðlinum.
• Y-gildi geta farið undir 0 eða yfir 1, sem gerir þér kleift að búa til yfirskots-/skopp-hraðabreytingar sem nafngreindu lykilorðin geta ekki framkallað.
• Skilar tilbúnum CSS-kóða sem heitir transition-timing-function — sama gildi virkar líka fyrir animation-timing-function.
• Keyrir alfarið í vafranum þínum — ekkert sem þú stillir er sent neitt. Ókeypis, engin skráning.

Hvernig á að nota það

1. Dragðu x1/y1 sleðana til að setja fyrsta stýripunktinn, sem mótar hvernig hreyfimyndin byrjar.
2. Dragðu x2/y2 sleðana til að setja annan stýripunktinn, sem mótar hvernig hreyfimyndin endar.
3. Fylgstu með svarta ferlinum á grafinu — ferill sem bungar upp fyrir ofan skálínuna í byrjun þýðir að hreyfingin byrjar hratt, en einn sem heldur sig fyrir neðan hana þýðir að hreyfingin byrjar hægt.
4. Smelltu á Spila til að sjá forskoðunarþátt hreyfast eftir brautinni með ferlinum þínum sem transition-timing-function.
5. Prófaðu forstillingu (ease, ease-in, ease-out, ease-in-out, linear) sem upphafspunkt og fínstilltu síðan sleðana þaðan.
6. Afritaðu CSS-kóðann sem myndast og límdu hann inn í transition- eða animation-reglu.

Dæmi

Inntak

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

Úttak

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

Þetta er staðlaða CSS-lykilorðið ease skrifað út sem skýra stýripunkta — hröð byrjun, snörp hröðun og síðan smám saman hægari hreyfing undir lokin.

Af hverju y-gildi geta farið yfir 0–1

Ólíkt x-ásnum, sem táknar tíma og verður að ganga frá 0 til 1, táknar y-ásinn framvindu hreyfða gildisins og hefur enga slíka takmörkun. Ef y1 er stillt undir 0 eða y2 yfir 1 dýfir ferillinn niður fyrir upphafsgildið eða skýtur yfir endagildið áður en hann jafnar sig — grunnurinn að yfirskots- og eftirvæntingaráhrifum sem notuð eru í hnappaþrýstingum, opnun gluggabirtinga og leikandi örsamskiptum í viðmóti. Ekkert af lykilorðunum fimm (ease, ease-in, ease-out, ease-in-out, linear) getur framkallað þetta; til þess þarf sérsniðna cubic-bezier().

transition-timing-function á móti animation-timing-function

cubic-bezier() gildið sem þetta verkfæri myndar virkar eins í báðum eiginleikum. Notaðu transition-timing-function þegar hreyfingin er ræst af stöðubreytingu (eins og að hover eða skipta um flokk), og animation-timing-function inni í @keyframes-drifinni hreyfimyndarreglu þegar þú þarft sömu hraðabreytingartilfinningu beitt sjálfkrafa eða í lykkju.

Algeng hraðabreytingarmynstur

• Snögg viðmótsviðbrögð (hnappar, rofar): haltu stýripunktunum nálægt skálínunni með örlítilli ease-out halla, t.d. cubic-bezier(0.4, 0, 0.2, 1).
• Staðalferill Material Design: cubic-bezier(0.4, 0, 0.2, 1) — hröð byrjun, mjúkur endir, mikið notaður fyrir umbreytingar á spjöldum og kortum.
• Skopp/yfirskot: ýttu y2 yfir 1, t.d. cubic-bezier(0.34, 1.56, 0.64, 1), fyrir leikandi birtingaráhrif.
• Eftirvænting fyrir hreyfingu: ýttu y1 undir 0 svo þátturinn dragist örlítið til baka áður en hann hreyfist áfram.
• Mjúkt ease-in-out fyrir endurteknar hreyfimyndir: haltu ferlinum nálægt samhverfum kringum miðjuna.

Notkun með öðrum CSS-verkfærum

Hraðabreytingarferill stendur sjaldan einn og sér — hann er venjulega notaður á þátt sem þarf líka skugga, ávalar horn eða litstigla skilgreinda. Búðu til myndræna útlitið með hinum CSS-verkfærunum hér fyrir neðan og bættu svo tímasetningarfallinu úr þessu verkfæri við sömu reglu eða transition/animation-yfirlýsingu.

→ Box Shadow Generator · Border Radius Generator

Algengar spurningar