0

Materjali disaini standardne leevenduskõver

Kujundage kohandatud CSS-i cubic-bezier() ajastusfunktsioon, lohistades kahte kontrollpunkti, kuvage selle reaalajas eelvaade lineaarse viite suhtes ja seejärel kopeerige valmis väärtus.

Kõvera kuju muutmiseks lohistage oranži käepidet (P1) ja punast käepidet (P2) – toimivad ka nooleklahvid. X jääb 0 ja 1 vahele, nagu CSS nõuab; lohistage kasti kohal või all olev käepide, et saata y sellest vahemikust ületamise ja põrkeefektide jaoks.

Sinu kõver

Lineaarne (võrdluseks)

Töötlemine... 0%

Tulemus

See leht avab generaatori, kus x1=0.4, y1=0, x2=0.2, y2=1 on juba laaditud – standardne leevenduskõver, mis on avaldatud Google'i materjalidisaini liikumisjuhistes. Lohistage numbreid ja kõverat, reaalajas eelvaadet ja kopeeritavat CSS-i värskendust koos või muutke neid.

Materjalikujundus nimetab seda kõverat "standardseks leevenduseks" ja soovitab seda enamiku ekraanil kuvatavate üleminekute jaoks – elemendid, mis on juba nähtavad ja liiguvad, suurust muudetakse või tuhmuvad samal ekraanil. Selle kuju kiireneb kiiresti, seejärel aeglustub õrnalt oma kohale, mistõttu on nii paljudel Androidi rakendustel ja materjali stiilis veebikasutajatel sama üleminekutunne, ilma et keegi märkaks, et nad kasutavad samu nelja numbrit.

Langetage see otse ülemineku-ajastamise või animatsiooni-ajastamise funktsiooni, et saada materjaliga ühtlane tunne, või kasutage seda võrdluspunktina: Materjali juhised määratlevad ka eraldi aeglustuse ja kiirendamise kõverad ekraanile sisenevate või sealt lahkuvate elementide jaoks, mida see üksik standardkõver ei ole mõeldud asendama.