Curba de relaxare standard de proiectare a materialelor
Proiectați o funcție de sincronizare CSS cubic-bezier() personalizată trăgând două puncte de control, previzualizați-o în direct față de o referință liniară, apoi copiați valoarea gata.
Rezultat
Această pagină deschide generatorul cu x1=0.4, y1=0, x2=0.2, y2=1 deja încărcat - curba standard de relaxare publicată în ghidurile de mișcare Google Material Design. Trageți fie mânerul, fie editați împreună numerele și curba, previzualizarea live și actualizarea CSS copiabilă.
Material Design numește această curbă „reducere standard” și o recomandă pentru majoritatea tranzițiilor de pe ecran - elemente care sunt deja vizibile și pur și simplu se mișcă, se redimensionează sau se estompează în cadrul aceluiași ecran. Forma sa accelerează rapid, apoi încetinește ușor în poziție, motiv pentru care atât de multe aplicații Android și interfețe de utilizare web în stil Material au aceeași senzație de tranziție, fără ca nimeni să observe că folosesc aceleași patru numere.
Introduceți-l direct în funcția de sincronizare a tranziției sau a funcției de sincronizare a animației pentru o senzație consistentă cu materialul sau folosiți-o ca punct de referință: liniile directoare ale materialului definesc, de asemenea, curbe separate de „decelerare” și „accelerare” pentru elementele care intră sau ies de pe ecran, pe care această curbă standard unică nu este menită să le înlocuiască.