Easing Functions Cheat Sheet
Funcțiile de relaxare specifică rata de modificare a unui parametru în timp.
Obiectele din viața reală nu pornesc sau se opresc instantaneu și aproape niciodată nu se deplasează cu viteză constantă. Când deschidem un sertar, mai întâi îl mișcăm rapid, și îl încetinim pe măsură ce iese. Aruncă ceva pe podea și mai întâi va accelera în jos, apoi revenind în sus după ce a lovit podeaua.
Această pagină vă ajută să alegeți funcția de relaxare potrivită.
Open Source
Ajută la traducerea site-ului în limba ta
x
t
CSS
În CSS, proprietățile de tranziție și animație vă permit să specificați o funcție de relaxare.
.block { transition: transform 0.6s ; }
Editați pe cubic-bezier.com.
În CSS, această funcție poate fi implementată folosind
@keyframes:Dimensiune
Se încarcă...
Poziție
Se încarcă...
Transparență
Se încarcă...
PostCSS
În PostCSS, funcția de relaxare este mult mai ușor de descris. Există un plugin postcss-easings care preia informațiile de tranziție de pe acel site.
.block { transition: transform 0.6s ; }
Acea declarație este abordată în descrierea de mai sus.
Din păcate, funcția de relaxare nu poate fi setată cu niciun plugin PostCSS. Se poate face cu
@keyframes, vezi mai sus.Gradient
Este posibil să desenați un gradient folosind postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Funcția matematică
Mai jos vedeți codul acestei funcții de simplificare scris în TypeScript. Variabila x reprezintă progresul absolut al animației în limitele lui 0 (începutul animației) și 1 (sfârșitul animației).
function (x: number): number {
}Mai jos vedeți codul acestei funcții de simplificare scris în TypeScript. Variabila x reprezintă progresul absolut al animației în limitele lui 0 (începutul animației) și 1 (sfârșitul animației).
function (x: number): number {
}Verificați relaxarea pentru modificări:
Această funcție:
Această funcție
Funcție liniară:
Funcție liniară