Cubic Bezier Generaator
Kujunda kohandatud CSS-i cubic-bezier() ajastusfunktsioon kahe kontrollpunkti lohistamisega, eelvaata seda otse lineaarse võrdluse suhtes, seejärel kopeeri valmis väärtus.
🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.
Tulemus
cubic-bezier(x1, y1, x2, y2) käsitsi trükkimine ja lehe uuesti laadimine, et tunnetust kontrollida, on aeglane viis animatsiooni häälestamiseks. See generaator sulgeb selle tsükli: lohista mõlemat kontrollpunkti käepidet kõveral või trüki täpsed numbrid x1/y1/x2/y2 väljadesse ning kõver, kopeeritav CSS-string ja otse animatsiooni eelvaade uuenevad iga muudatusega — ei mingit ehitamise sammu ega uuesti laadimist.
Kaks telge töötavad meelega erinevalt. x1 ja x2 jäävad piiratuks 0 ja 1 vahele, sest see on täpselt see, mida CSS-i spetsifikatsioon cubic-bezier() ajastusfunktsioonilt tegelikult nõuab — väärtus väljaspool seda vahemikku on lihtsalt kehtetu. y1 ja y2-l sellist piirangut pole: lohista käepide kasti ülaosast kõrgemale või alaosast madalamale ja kõver lööb üle oma alguse või lõpu, mis ongi täpselt see, kuidas vedru- ja põrkestiilis efektid ühest leevenduskõverast luuakse.
Numbri nägemine ei ole sama mis liikumise nägemine, seega käitab eelvaade kahte identset palli kõrvuti korduvalt: üks liigub sinu kohandatud kõverat kasutades, teine liigub tavalise ühtlase lineaarse tempoga. Nende võiduajamise vaatamine on kiireim viis tuvastada, kas leevenduskõver tekitab tegelikult soovitud tunnetuse, enne kui see üldse stiilileheni jõuab. Eelseadistuste lehed — CSS-i enda ease-in-out märksõna taga olevad tegelikud numbrid, aus ülelöögi lähendus, mida mõned nimetavad põrkeks, ja Google'i avaldatud Material Designi standardkõver — on valmis lähtepunktid, millest saad lohistada, mitte tühjadest kontrollpunktidest alustada.
Kõik töötab kohalikult sinu brauseris: pole üleslaadimist, pole kontot, pole serveripöördumist ja generaator jätkab töötamist võrguühenduseta, kui leht on kord laaditud.