Miten luon mukautetun cubic-bezier-helpotuskäyrän CSS:lle?

Vedä kahta ohjauspisteen kahvaa kuvaajassa, kirjoita tarkat x1, y1, x2, y2 -arvot tai valitse valmis asetus. Valitse sitten CSS Tulosteen muoto -kohdasta ja napsauta Kopioi saadaksesi cubic-bezier()-arvon transition-timing-function -ominaisuudelle.

Miten teen pomppu- tai ylitysefektin cubic-bezierillä?

Vedä kahvaa laatikon ylä- tai alapuolelle niin, että sen Y-arvo ylittää arvot 0–1. Y voi ylittää tämän alueen, kun taas X pysyy välillä 0 ja 1. Back-out- ja anticipate-valmiit asetukset ovat valmiita ylityksen lähtökohtia.

Voinko saada helpotuksen Tailwindille, Framer Motionille tai anime.js:lle?

Kyllä. Tulosteen muoto -välilehdet ovat CSS, Tailwind, Framer Motion ja anime.js. Ne kaikki muotoilevat samat neljä numeroa, joten valitse välilehti ja napsauta Kopioi laittaaksesi pätkän leikepöydällesi.

Miten lataan olemassa olevan cubic-bezier-arvon muokatakseni sitä?

Liitä arvo, kuten cubic-bezier(.17, .67, .83, .67), tuontilaatikkoon ja napsauta Lataa. Jos neljää numeroa ei voida lukea, saat virheilmoituksen. Käyrä tallennetaan myös sivun URL-osoitteeseen risuaidan jälkeen, joten se voidaan jakaa.

Miksi esikatselu tuntuu hitaammalta kuin oikeat siirtymäni?

Liike-esikatselu käyttää Kesto-asetusta, jota voit muuttaa, ja oletusarvot ovat hitaampia, jotta voit tutkia käyrää. Lyhennä Kestoa ja käytä sitten Toista nähdäksesi liikkeen nopeudella, jolla aiot julkaista sen.

Onko se todella ilmainen?

Kyllä. Jokainen työkalu on ilmainen, eikä vaadi tiliä tai luottokorttia. Työ tehdään laitteellasi palvelimiemme sijaan, minkä ansiosta se pysyy maksuttomana.

Toimiiko se mobiililla?

Kyllä. Se toimii nykyaikaisissa mobiiliselaimissa iOS:llä ja Androidilla, eikä mitään tarvitse asentaa.

📈

CSS Cubic-Bezier -helpotuksen generaattori ilmaiseksi

Suunnittele CSS-helpotuskäyriä vetämällä ohjaussivuja, esikatsele liikettä live-tilassa ja kopioi cubic-bezier()-arvo. Sisältää ylitysosumat/pomppumisesimääritetyt arvot.

Toimii selaimessasiEi rekisteröitymistä, ei ponnahdusikkunoitaEi kirjautumista tarvitaIlmainen ikuisesti

Toimii offline-tilassa kerran ladattuna

Vedä vihreitä ja vaaleanpunaisia kahvoja muokataksesi käyrää

Ohjauspisteet

x1y1x2y2

Liike-esikatselu

Kesto1,6s

Leveyssiirtymä

CSS-arvo

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Esiasetetut

Vaaleanpunaiset ja vihreät kahvat voidaan vetää boksin yli tai alle (Y yli 0-1) luomaan yliampumis-/pomppuefektejä kuten back-out ja anticipate. X pysyy välillä 0-1 (aika ei voi kulkea taaksepäin).

Yleiset käyttötavat

Mukautettu CSS-Siirtymisen YhtäläistäminenSuunnittele luonnollisen tuntuinen yhtäläistäminen hover-tehosteille, valikoille ja käyttöliittymän siirtymille.
Pomppiva ja Ylitys-AnimaatiotLuo leikinomaiset jousi-/pomppivat liikkeet vetämällä ohjauspisteitä laatikon yli.
Yhtäläistäminen @keyframes-AnimaatioilleValitse oikea animation-timing-function CSS-keyframe-animaatioille.
Yhtäläistämisen Arvot JS-AnimaatiokirjastoilleHanki cubic-bezier-arvot GSAP:lle, Framer Motionille, anime.js:lle ja muille.
Ymmärrä Kuinka Yhtäläistäminen ToimiiNäe yhteys Bezier-käyrän ja sen tuottaman liikkeen välillä.

Miten se toimii

Editori on rakennettu kokonaan selaimeen käyttäen Reactin tilaa ja SVG:tä — mikään kirjasto ei käsittele käyrälaskentaa. Kaksi vedettävää ohjauspistettä määrittelevät SVG-kuutiollisen Bezier-polun, ja selaimen oma CSS-animaatiomoottori ajaa liikkeen esikatselun ruiskuttamalla tuloksena olevan cubic-bezier()-arvon suoraan @keyframes-sääntöön.

1
Vedä tai kirjoita ohjauspisteet
Kaksi kahvaa (P1 sinivihreänä, P2 ruusunpunaisena) sijaitsevat SVG-kanvaassa. Vetäminen käyttää Pointer Events -rajapintaa setPointerCapture-toiminnolla, jotta kahva seuraa sormeasi tai kursoriasi jopa SVG:n rajojen ulkopuolella. Voit myös siirtää kahvoja nuolinäppäimillä tai kirjoittaa tarkat arvot x1/y1/x2/y2-numerosyötteisiin.
2
SVG piirtää käyrän reaaliajassa
Käyrä on yksittäinen SVG <path>-elementti, jonka C (kuutiollinen Bezier) -komento lasketaan uudelleen neljästä ohjauspisteen koordinaatista joka tilan päivityksellä. Ei kanvasta, ei ulkoista kirjastoa — selaimen SVG-piirtomoottori piirtää polun suoraan.
3
Selaimen CSS-moottori esikatselee tasoituksen
Kolme suoraa animaatiota (liukuva piste, leveyssiirtymä ja skaalaus) ajavat CSS @keyframes-sääntöjä cubic-bezier()-arvolla ruiskutettuna suoraan. Selaimen oma animaatiomoottori tulkitsee käyrän, joten näkemäsi on täsmälleen se, mitä tuotanto-CSS:äsi tuottaa.
4
Kopioi katkelma kehyksesi syntaksilla
Välilehdet muotoilevat samat neljä lukua CSS-siirtymän ajastusfunktioksi (transition-timing-function), Tailwind-mielivaltaisarvoluokaksi, Framer Motion -tasoitusjonoksi tai anime.js-tasoitusmerkkijonoksi. Katkelma kirjoitetaan leikepöydälle navigator.clipboard-rajapinnalla. Käyrä koodataan myös URL-hashiin (#b=x1,y1,x2,y2), jotta voit jakaa tai kirjanmerkitä sen.