Cubic-bezier ritill

Hvernig á að nota cubic-bezier ritilinn

1. Dragðu handföngin tvö á grafinu. P1 (fyrsti stýripunkturinn) mótar upphaf hreyfingarinnar, P2 endinn. Tími líður frá vinstri til hægri og framvinda neðan frá og upp.
2. Eða sláðu inn gildi í cubic-bezier() gildi: heilt cubic-bezier(0.4, 0, 0.2, 1), fjórar tölur eða lykilorð eins og ease-in-out. Reitirnir x1, y1, x2 og y2 breyta einu hniti í einu.
3. Byrjaðu á valmyndinni Forstillingar (CSS-lykilorð, fjölskyldurnar frá sine til back og Material Design ferlar) eða lykilorðahnöppunum. Þegar ferillinn þinn passar við forstillingu birtist nafn hennar við hliðina á hnöppunum.
4. Fylgstu með Forskoðun hreyfimyndar: punkturinn á Ferillinn þinn og punkturinn á linear ferðast sömu vegalengd á sömu Lengd. Notaðu Gera hlé/Spila og Byrja aftur til að bera þá saman.
5. Afritaðu niðurstöðuna úr CSS-tímafall, eða afritaðu linear() nálgun og veldu fjölda Hlutar.

Lyklaborð: settu handfang í fókus og notaðu örvalyklana til að færa það um 0,01, eða 0,1 með Shift.

Ef kerfið þitt er stillt á minni hreyfingu byrjar hreyfimyndin í hléi. Ýttu á Spila ef þú vilt keyra hana samt.

Hvað cubic-bezier() þýðir

CSS easing fall varpar liðnum tíma yfirgangs (transition) (0 til 1) í framvindu hans (0 til 1). cubic-bezier(x1, y1, x2, y2) lýsir þessari vörpun með þriðja stigs Bézier-ferli sem byrjar í (0, 0), endar í (1, 1) og er togaður af tveimur stýripunktum, P1 = (x1, y1) og P2 = (x2, y2).

• x-gildi eru tími og verða að vera milli 0 og 1, annars væri fallið ekki gildur tímaferill. Ritillinn heldur þeim innan marka.
• y-gildi eru framvinda og mega fara undir 0 eða yfir 1. Y yfir 1 lætur hreyfimyndina skjóta yfir markið og koma til baka, eins og Back ferlarnir; undir 0 fer hún fyrst afturábak.
• Bratt hallandi ferill þýðir hraða hreyfingu, flatur hægan. ease-out byrjar hratt og endar hægt, sem finnst eðlilegt fyrir þætti sem koma inn á skjáinn. ease-in gerir öfugt og hentar þáttum sem fara út.

CSS-lykilorðin eru styttingar: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) og linear = (0, 0, 1, 1).

linear() nálgunin

Nýrra fallið linear() telur upp framvindugildi á jafn dreifðum tímapunktum, til dæmis linear(0, 0.25, 0.5, 0.75, 1), og tengir þau með beinum línum. Tólið sýnatekur ferilinn þinn (það leysir Bézier-ferilinn fyrir hvert tímaskref) og skrifar gildin með þremur aukastöfum. Með 20 til 40 hlutum er niðurstaðan sjónrænt eins og ferillinn. Raunverulegur ávinningur linear() er fyrir ferla sem Bézier getur ekki teiknað, eins og hopp og gorma, en það gerir þér líka kleift að deila einni syntax. Það virkar í Chrome og Edge 113+, Firefox 112+ og Safari 17.2+, svo haltu cubic-bezier() gildinu sem varaleið.