Tärkeimmät kohdat
- 01Vedä kaksi ohjainpisteet käyrän visuaalisesti-kumoava sen sijaan, että arvailisi numeeriset arvot.
- 02Elävä pallo animaatio toisinta ajoitus niin voit tuntea liikkeen ennen sitoutumista siihen.
- 03Kaikki viisi CSS sisäänrakennettu esiasetus (helpotus, lineaarinen, helpotus-sisään, helpotus-ulos, helpotus-sisään-ulos) ovat käytettävissä lähtöpisteiksi.
- 04Cubic-bezier() arvo päivittyy elävällä kahden desimaalin tarkkuudella, valmiina liitettäväksi mihin tahansa CSS-ominaisuus.
Miksi mukautetut helpotuskäyrät ovat tärkeitä UI-liikkeelle
CSS sisäänrakennettu ajoitusfunktiot — helpotus, helpotus-sisään-ulos, lineaarinen — peittävät paljon maata, mutta jokainen UI:lla on hetkiä, joissa oletus tuntuu hieman väärin. Vihje, joka näkyy liian ripeästi, modaali, joka ylittää avauksella, edistyspalkkia, joka tuntuu mekaaniselta. Cubic-bezier käyrät antaa sinulle virittää liike tuntua luonnolliselta sen sijaan mekaaniselta, mutta neljä numeroa cubic-bezier(0.4, 0, 0.2, 1) ovat lähes mahdotonta näistä suoraan.
Handytool:in cubic-bezier editor muuttaa nämä numerot visuaaliseksi käyräksi kahden vedetävät kahvat kanssa. Siirrä kahva ja pallo animaatio toisinta välittömästi, niin voit iteroida tunteella kunnes liike vastaa tarkoitusta. Sitten kopioi arvo ja pudota se CSS-osaksi — valmis.
Kuinka suunnitella CSS-helpotuskäyrä
- 01
Aloita esiasetelusta
Valitse helpotus, lineaarinen, helpotus-sisään, helpotus-ulos, tai helpotus-sisään-ulos tasona. Kahvat naksaa oikeat sijainnit jokaisen esiasetelun osalta.
- 02
Vedä ohjauskohde kahvat
Jokainen kahva hallitsee käyrän yhtä päätä — aloituskahva muotoja alkuperäinen kiihdytys, pääte kahva muotoja lopullinen hidastus. Siirrä kahva vaihtaa esiasetelun 'mukautetuksi' automaattisesti.
- 03
Katso pallo animaatio
Pallo animaatioita vasemmalta oikealle käyttäen käyrä. Säädä kestoliidin liukuva esikatselu hidas vs nopea siirtymää.
- 04
Kokeile ylityötä
Vedä Y-aksin kahva yli 1 tai alle 0 luoda ylitys ja undershoot — 'karkeasti' vaikutus, joka tekee valikon naksaa avata energisesti.
- 05
Kopioi CSS-arvo
Napsauta Kopioi saadaksesi cubic-bezier() merkkijono ja liitä se siirtymä-ajoitus-funktion tai animaatio-ajoitus-funktion muodostoon tyylisivulla.
Juoksee kokonaan selaimessasi
Editor on itsenäinen selaintyökalu — mitään kirjasimia, mitään käsikirjoituksia, ja mitään tietoa ladataan sivun avauduttua jälkeen. Vetäminen kahvat ja esikatselua animaatioita työ offline. Cubic-bezier kaava käytetään esikatselua palloa on sama kuin selaimen käyttää CSS-siirtymä, niin mitä näet editor on tarkalleen mitä tyylisivulla tuottaa.
Mitään asentaa ja mitään rekisteröityä. Tuotos on yksi CSS-arvo — liitä se ja olet valmis.
Cubic-Bezier Editor FAQ
Mikä on cubic-bezier helpotuskäyrä?
Se on matemaattinen käyrä, jonka määrittävät kaksi ohjauskohta, jotka määrittävät kuinka CSS-siirtymä tai animaatio kiihdytä ajan. Neljä numeroa cubic-bezier(x1, y1, x2, y2) aseta sijainnit nämä ohjauskohta.
Miksi Y-arvot voivat mennä yli 1 tai alle 0?
Y-arvot ulkopuolella 0–1 tuota ylitys ja undershoot — käyrä menee sen pääte ennen asettumista. Tämä luo 'karkeasti' helpotus käyrät. X-arvot täytyy pysyä 0–1.
Kuinka käytän tuotosta?
Kopioi cubic-bezier(...) merkkijono ja liitä se mihin tahansa CSS siirtymä-ajoitus-funktion tai animaatio-ajoitus-funktion arvo. Se toimii jokaisen nykyisen selaimen.
Mitä helpotus-sisään-ulos todella tarkoittaa?
Se alkaa hidas, kiihdytä keskellä, ja hidastaa lopussa — cubic-bezier(0.42, 0, 0.58, 1). Se peilaa kuinka todelliset esineet kiihdytä ja hidastaa ja on oletusarvo valinta useimmat kiilloitettu UI liiketta.
Onko pallo animaatio esikatselu tarkkaa CSS:lle?
Kyllä — esikatselu käyttää sama cubic bezier kaava selaimen soveltaa CSS-siirtymä. Kestoliidin liukuva antaa sinulle tuntea hidas vs nopea käyrät ennen sitoutumista.