CSS Cubic Bezier rafall

Skilningur á CSS Cubic Bezier hreyfisveigjum

Í CSS-hreyfimyndum og umbreytingum stýra tímasetningarfall (e. timing functions) því hvernig hraði breytingar þróast yfir ákveðið tímabil. Í stað þess að hreyfing sé línuleg og einhæf, gerir cubic-bezier() fallið hönnuðum kleift að skilgreina nákvæman hröðunarferil. Þetta er gert með því að nota stýripunkta sem ákvarða lögun sveigju sem hreyfingin fylgir.

Sveigjan liggur ávallt frá neðst til vinstri, sem táknar upphaf hreyfingarinnar, til efst til hægri, sem táknar endalok hennar. Á þessum fleti líður tíminn frá vinstri til hægri (X-ás), á meðan framvinda hreyfingarinnar (Y-ás) fer upp á við. Með því að breyta staðsetningu tveggja stýripunkta á þessum fleti má hanna sérsniðna hröðun sem gefur hreyfingum náttúrulegra yfirbragð.

Stýripunktar og takmarkanir gilda

Formúlan fyrir cubic-bezier(x1, y1, x2, y2) krefst fjögurra hnitagilda sem skilgreina tvo stýripunkta:

• Fyrsti stýripunktur (x1, y1): Stýrir lögun hreyfisveigjunnar.
• Annar stýripunktur (x2, y2): Stýrir lögun hreyfisveigjunnar.

Fyrir þessi gildi gilda strangar reglur sem stjórna því hvernig sveigjan hegðar sér:

• X-gildin (x1 og x2): Verða að vera á bilinu 0 til 1. Þetta er vegna þess að tíminn getur ekki flætt aftur á bak eða farið fram úr heildartíma umbreytingarinnar. Ef slegið er inn gildi utan þessa ramma, til dæmis 9 fyrir X-gildi fyrsta stýripunkts, og smellt er út úr reitnum, mun gildið sjálfkrafa leiðréttast í 1.
• Y-gildin (y1 og y2): Eru takmörkuð við bilið -0.70 til 1.70. Þessi gildi mega fara út fyrir rammann (undir 0 eða yfir 1). Þegar Y-gildi fer undir 0 dregst hreyfingin aftur fyrir upphafspunktinn áður en hún byrjar (eftirhlaup eða pull-back). Þegar Y-gildi fer yfir 1 fer hreyfingin yfir endamarkið áður en hún jafnar sig og lendir á lokapunktinum (yfirskot eða overshoot).

Ef slegið er inn ógilt eða tómt gildi í innsláttarreitina bíður kerfið eftir að fullgilt gildi sé slegið inn. Ef reitur er tæmdur og smellt er út úr honum endurheimtir kerfið síðasta gilda gildi sem var notað. Einnig er hægt að fínstilla gildi með lyklaborðinu; ef stýripunktur er valinn og ýtt er á vinstri örvartandann breytist gildið, til dæmis í 0.99.

Notkun í CSS-kóða

Þegar réttri sveigju hefur verið náð er hægt að afrita cubic-bezier() gildið beint og nota það í stílblöðum. Þetta gildi er notað með eiginleikum eins og transition-timing-function og animation-timing-function, eða sem hluti af styttri rithætti.

Dæmi um notkun í CSS:

.element {
  /* Notkun með transition */
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Styttri ritháttur */
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

Þegar gildið er afritað úr tólunni birtist staðfesting sem sýnir að aðgerðin hafi heppnast.

Forstillingar og samanburður

Tólið inniheldur nokkrar innbyggðar forstillingar sem sýna nákvæm gildi á bak við algengustu lykilkenni CSS:

• ease
• ease-in
• ease-out
• ease-in-out

Auk þess eru flóknari forstillingar í boði sem sýna hvernig hægt er að ná fram eftirhlaupi og yfirskoti:

• Sveigja inn (Back In)
• Sveigja út: Þessi forstilling setur gildið á cubic-bezier(0.34, 1.56, 0.64, 1). Hér fer fyrra Y-gildið upp í 1.56, sem veldur því að hreyfingin fer yfir markið áður en hún lendir mjúklega á lokapunktinum.
• Sveigja inn-út

Takmarkanir á cubic-bezier()

Þó að cubic-bezier() sé öflugt tæki til að búa til sérsniðnar hreyfingar hefur það sínar takmarkanir. Ein stök cubic-bezier sveigja getur gert ráð fyrir eftirhlaupi í upphafi og farið yfir markið í lokin, en hún getur aðeins hreyfst í eina átt og jafnað sig svo.

Hún getur ekki lýst flóknum hreyfingum sem breyta um stefnu mörgum sinnum, eins og skoppi (e. bounce) eða fjaðrandi hreyfingum (e. elastic). Til þess að ná fram slíkum áhrifum þarf að nota CSS @keyframes með mörgum skrefum eða nýrri aðferðir eins og linear() fallið með mörgum stoppum.

Persónuvernd og vinnsla gagna

Sveigjan er teiknuð beint í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo. Öll útreikningar og myndræn framsetning eiga sér stað staðbundið á tækinu þínu.

---

Algengar spurningar

Hvað þýða handföngin tvö og tölurnar fjórar?

Sveigjan liggur frá neðst til vinstri (byrjun) til efst til hægri (endir), þar sem tíminn líður frá vinstri til hægri og framvinda fer upp á við. Handföngin tvö eru stýripunktarnir sem beygja hana — hvor um sig hefur X og Y gildi, svo saman mynda þeir cubic-bezier(x1, y1, x2, y2). X helst á bilinu 0 til 1, en Y getur farið yfir toppinn eða undir botninn til að láta hreyfinguna fara yfir markið eða bakka áður en hún jafnar sig.

Hvernig nota ég gildið í CSS-kóðanum mínum?

Afritaðu cubic-bezier() gildið og settu það inn þar sem tímasetningarfall á heima — transition-timing-function, animation-timing-function, eða í styttri rithætti, t.d. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Lykilorðin ease, ease-in, ease-out og ease-in-out eru bara fastar cubic-bezier sveigjur, svo þegar þú velur eina af þeim sérðu nákvæma gildið á bak við lykilorðið.

Getur þetta búið til skopp- eða fjaðurefni?

Ekki eitt og sér. Einföld cubic-bezier sveigja getur gert ráð fyrir eftirhlaupi og farið yfir markið — „back“ forstillingarnar draga annað handfangið út fyrir rammann til að gera einmitt það — en hún getur aðeins hreyfst í eina átt og jafnað sig svo. Skopp (bounce) eða fjaðrandi hreyfingar breyta um stefnu oft, sem ein og sér cubic-bezier sveigja getur ekki lýst; til þess þarf CSS keyframes eða linear() fallið með mörgum stoppum.