0

Standardna krivulja popuštanja materijalnog dizajna

Dizajnirajte prilagođenu CSS cubic-bezier() funkciju mjerenja vremena povlačenjem dviju kontrolnih točaka, pregledajte je uživo u odnosu na linearnu referencu, zatim kopirajte gotovu vrijednost.

Povucite narančastu ručicu (P1) i crvenu ručicu (P2) da preoblikujete krivulju — tipke sa strelicama također rade. X ostaje stegnut između 0 i 1 kako to zahtijeva CSS; povucite ručicu iznad ili ispod okvira za slanje y preko tog raspona za efekte prekoračenja i odbijanja.

Tvoja krivulja

Linearno (za usporedbu)

Obrada... 0%

Rezultat

Ova stranica otvara generator s već učitanim x1=0,4, y1=0, x2=0,2, y2=1 — standardnom krivuljom popuštanja objavljenom u Googleovim smjernicama kretanja za materijalni dizajn. Povucite ili rukujte ili uredite brojeve, krivulju, pregled uživo i CSS ažuriranje koje se može kopirati zajedno.

Materijalni dizajn ovu krivulju naziva "standardnim ublažavanjem" i preporučuje je za većinu prijelaza na zaslonu — elemente koji su već vidljivi i jednostavno se pomiču, mijenjaju veličinu ili blijede unutar istog zaslona. Njegov oblik se brzo ubrzava, a zatim lagano usporava na svoje mjesto, što je razlog zašto toliko Android aplikacija i web sučelja u stilu Materiala dijele isti osjećaj prijelaza, a da nitko ne primijeti da koriste ista četiri broja.

Ispustite ga izravno u funkciju prijelaznog vremena ili funkciju vremenskog usklađivanja animacije za osjećaj usklađenosti s materijalom ili ga upotrijebite kao referentnu točku: Smjernice za materijal također definiraju zasebne krivulje "usporavanja" i "ubrzavanja" za elemente koji ulaze ili izlaze iz zaslona, a koje ova jedinstvena standardna krivulja nije namijenjena zamjeni.