⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Standardna krivulja popuščanja materialne zasnove

Oblikujte časovno funkcijo CSS cubic-bezier() po meri tako, da povlečete dve kontrolni točki, jo predogledate v živo glede na linearno referenco in nato kopirate pripravljeno vrednost.

Povlecite oranžni ročaj (P1) in rdeči ročaj (P2), da preoblikujete krivuljo – delujejo tudi puščične tipke. X ostane vpet med 0 in 1, kot zahteva CSS; povlecite ročico nad ali pod polje, da pošljete y čez to območje za učinke prekoračitve in odboja.

Tvoja krivulja

Linearno (za primerjavo)

Obdelava ... 0%

Rezultat

Ta stran odpre generator z že naloženimi x1=0,4, y1=0, x2=0,2, y2=1 — standardno krivuljo popuščanja, objavljeno v Googlovih smernicah gibanja Material Design. Skupaj povlecite ročaj ali uredite številke ter krivuljo, predogled v živo in posodobitev CSS, ki jo je mogoče kopirati.

Material Design to krivuljo imenuje "standardno popuščanje" in jo priporoča za večino prehodov na zaslonu - elemente, ki so že vidni in se preprosto premikajo, spreminjajo velikost ali bledijo znotraj istega zaslona. Njegova oblika se hitro pospeši, nato pa nežno upočasni na svoje mesto, zato ima toliko aplikacij za Android in spletnih uporabniških vmesnikov v slogu Material enak občutek prehoda, ne da bi kdo opazil, da uporabljajo iste štiri številke.

Spustite ga naravnost v funkcijo prehodnega časovnega razporeda ali funkcijo časovnega usklajevanja animacije za občutek, skladen z materialom, ali pa ga uporabite kot referenčno točko: Smernice Materiala opredeljujejo tudi ločeni krivulji »upočasnitve« in »pospeševanja« za elemente, ki vstopajo na zaslon ali zapuščajo zaslon, ki jih ta enotna standardna krivulja ne sme nadomestiti.

🛡️
Izvedeno v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka popolnoma brez povezave. 100 % varno.

Sprejeti formati in pravila

  • Urejevalnik krivulj SVG, ki ga je mogoče povleči, z dvema ročajema (P1 in P2) in vnosom števil x1/y1/x2/y2, ki jih je mogoče urejati za slikovne pike natančne vrednosti.
  • Predogled zanke animacije, ki primerja vaš čas cubic-bezier() po meri z linearno referenčno kroglo, tako da lahko vidite umirjanje, ne le preberete.
  • Cubic-bezier (x1, y1, x2, y2) niz, ki ga je mogoče kopirati, pripravljen za funkcijo prehoda-časa ali funkcijo animacije-časa, plus prednastavljene strani za lažji vstop, odboj in standardno krivuljo Material Design.

Ključne prednosti

✓ Povlecite eno od ročic nadzorne točke in si oglejte krivuljo, predogled animacije v živo in niz CSS, ki ga je mogoče kopirati, in se posodabljajo skupaj – ni vam treba zapomniti koordinatne matematike.
✓ Y lahko preseže 0 in 1 za učinke pomladi in odboja, medtem ko X ostane pripet na obseg 0–1, ki ga dejansko zahteva CSS, tako da je vsaka vrednost, ki jo kopirate, veljavna v trenutku, ko jo prilepite.
✓ Vzporedni predogled primerja vašo krivuljo po meri z navadno linearno referenco, tako da je razlika v občutku gibanja – celoten razlog za uporabo popuščanja – očitna na prvi pogled, ne le izhod kode.

Primeri uporabe

  • • Ali namesto ene od vgrajenih ključnih besed ease potrebujete CSS-funkcijo prehodnega časa ali funkcijo časovnega animacije po meri?
  • • Ali želite natančno videti, kako izgleda cubic-bezier(0,42, 0, 0,58, 1) — resnične številke za CSS-jevo lastno ključno besedo ease-in-out — v gibanju, preden ga pošljete?
  • • Ali gradite poskočni gumb, modalno animacijo ali animacijo kartice in potrebujete pripravljeno krivuljo popuščanja prekoračitve, ki jo želite kopirati naravnost v svojo datoteko slogov?