Cubic Bezier -generaattori
Suunnittele oma CSS cubic-bezier()-ajoitusfunktio vetämällä kahta ohjauspistettä, esikatsele se elävänä lineaarista referenssiä vasten ja kopioi sitten valmis arvo.
🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.
Tulos
cubic-bezier(x1, y1, x2, y2) -arvon kirjoittaminen käsin ja sivun uudelleenlataaminen tunteen tarkistamiseksi on hidas tapa säätää animaatiota. Tämä generaattori sulkee tuon silmukan: vedä käyrän kummasta tahansa ohjauspisteen kahvasta tai kirjoita tarkat numerot x1/y1/x2/y2-kenttiin, niin käyrä, kopioitava CSS-merkkijono ja elävä animaatioesikatselu päivittyvät jokaisella muutoksella — ei käännösvaihetta, ei uudelleenlatausta.
Kaksi akselia toimivat tarkoituksella eri tavalla. x1 ja x2 pysyvät välillä 0–1, koska juuri sitä CSS-määrittely todella vaatii cubic-bezier()-ajoitusfunktiolta — arvo tämän välin ulkopuolella on yksinkertaisesti virheellinen. y1:llä ja y2:lla ei ole tällaista rajaa: vedä kahva laatikon yläpuolelle tai alapuolelle, ja käyrä ylittää alkunsa tai loppunsa, mikä on juuri tapa, jolla jousi- ja pompputyyliset efektit rakennetaan yhdestä pehmennyskäyrästä.
Numeron näkeminen ei ole sama kuin liikkeen näkeminen, joten esikatselu ajaa kahta identtistä palloa rinnakkain silmukassa: toinen liikkuu mukautetulla käyrälläsi, toinen tasaisella lineaarisella nopeudella. Niiden kilpajuoksun katsominen on nopein tapa kertoa, tuottaako pehmennyskäyrä todella haluamasi tunnun, ennen kuin se koskaan päätyy tyylitiedostoon. Esiasetussivut — oikeat luvut CSS:n oman ease-in-out-avainsanan takana, rehellinen ylitysapproksimaatio, jota jotkut kutsuvat pompukseksi, ja Googlen julkaisema Material Design -vakiokäyrä — ovat valmiita lähtökohtia, joista voit vetää tyhjien ohjauspisteiden sijaan.
Kaikki toimii paikallisesti selaimessasi: ei lähetystä, ei tiliä, ei palvelinkierrosta, ja generaattori toimii offline-tilassa, kun sivu on kerran ladattu.