Cubic-bezier-editori

Näin käytät cubic-bezier-editoria

1. Vedä kaavion kahta kahvaa. P1 (ensimmäinen ohjauspiste) muotoilee liikkeen alun ja P2 lopun. Aika kulkee vasemmalta oikealle ja eteneminen alhaalta ylös.
2. Tai kirjoita arvo kenttään cubic-bezier()-arvo: täydellinen cubic-bezier(0.4, 0, 0.2, 1), neljä lukua tai avainsana, kuten ease-in-out. Kentät x1, y1, x2 ja y2 muokkaavat yhtä koordinaattia kerrallaan.
3. Aloita Esiasetukset-valikosta (CSS-avainsanat, sinestä backiin ulottuvat perheet ja Material Design -käyrät) tai avainsanapainikkeista. Kun käyräsi vastaa esiasetusta, sen nimi näkyy painikkeiden vieressä.
4. Seuraa Animaation esikatselua: piste kohdassa Oma käyräsi ja piste kohdassa linear kulkevat saman matkan saman Kesto-arvon aikana. Käytä painikkeita Tauko/Toista ja Aloita alusta vertaillaksesi niitä.
5. Kopioi tulos kohdasta CSS-ajoitusfunktio tai kopioi linear()-approksimaatio ja valitse sen Segmentit-määrä.

Näppäimistö: kohdista kahva ja siirrä sitä nuolinäppäimillä 0,01 tai Shiftillä 0,1.

Jos järjestelmäsi on asetettu vähentämään liikettä, animaatio alkaa pysäytettynä. Paina Toista, jos haluat ajaa sen silti.

Työkalu toimii selaimessasi. Mitään kirjoittamaasi ei lähetetä palvelimelle.

Mitä cubic-bezier() tarkoittaa

CSS:n easing-funktio kuvaa siirtymän kuluneen ajan (0–1) sen etenemiseen (0–1). cubic-bezier(x1, y1, x2, y2) kuvaa tämän kuvauksen kolmannen asteen Bézier-käyrällä, joka alkaa pisteestä (0, 0), päättyy pisteeseen (1, 1) ja jota vetävät kaksi ohjauspistettä, P1 = (x1, y1) ja P2 = (x2, y2).

• x-arvot ovat aikoja, ja niiden on pysyttävä välillä 0–1, muuten funktio ei olisi kelvollinen ajoituskäyrä. Editori pitää ne rajoissa.
• y-arvot ovat etenemistä ja voivat mennä alle 0:n tai yli 1:n. Yli 1:n y saa animaation ylittämään kohteensa ja palaamaan takaisin, kuten Back-käyrissä. Alle 0:n se liikkuu ensin taaksepäin.
• Jyrkkä kulmakerroin tarkoittaa nopeaa liikettä ja loiva hidasta. ease-out alkaa nopeasti ja päättyy hitaasti, mikä tuntuu luonnolliselta ruutuun tuleville elementeille. ease-in tekee päinvastoin ja sopii poistuville elementeille.

CSS-avainsanat ovat oikopolkuja: 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) ja linear = (0, 0, 1, 1).

linear()-approksimaatio

Uudempi linear()-funktio luettelee etenemisarvot tasavälein sijoitetuilla ajanhetkillä, esimerkiksi linear(0, 0.25, 0.5, 0.75, 1), ja yhdistää ne suorilla viivoilla. Työkalu näytteistää käyräsi (ratkaisee Bézierin jokaiselle aika-askeleelle) ja kirjoittaa arvot kolmella desimaalilla. 20–40 segmentillä tulos on visuaalisesti identtinen käyrän kanssa. linear():n todellinen hyöty on käyrissä, joita Bézier ei voi piirtää, kuten pomppuissa ja jousissa, mutta sen avulla voi myös jakaa yhden syntaksin. Se toimii Chromessa ja Edgessä 113+, Firefoxissa 112+ ja Safarissa 17.2+, joten säilytä cubic-bezier()-arvo varaversiona.