Overgangsfunksjoner Jukselapp
Overgangsfunksjoner spesifiser endringsraten til et parameter over tid
Objekter i virkeligheten starter og stopper ikke øyeblikkelig, og nesten aldri har de en konstant hastighet. Når vi åpner en skoff, starter vi raskt, og avslutter sakte mens den kommer ut. Slipp noe på gulvet, og den vil først akselerere nedover, så sprette opp igjen etter å ha truffet gulvet.
Denne siden hjelper deg med å velge riktig overgangsfunksjon.
Openkildet
Hjelp med å oversette siden til ditt språk
x
t
CSS
I CSS, overgangs- og animasjonsegenskapene lar deg spesifisere en overgangsfunksjon.
.block { transition: transform 0.6s ; }
Rediger på cubic-bezier.com.
I CSS kan denne funksjonen bli implementert ved bruk av
@keyframes:Størrelse
Laster inn...
Posisjon
Laster inn...
Gjennomsiktighet
Laster inn...
PostCSS
I PostCSS er overgangsfunksjonen mye lettere å beskrive. Det finnes en plugin poscss-easings som tar overgansinformasjon fra den siden.
.block { transition: transform 0.6s ; }
Den deklareringen er gjort om til den beskrevet over.
Uheldigvis kan ikke overgangsfunksjonen settes med noen PostCSS pluginer. Kan bli gjort med
@keyframes, se over.Overgang
Det er mulig å tegne en overgang med postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Mattefunksjon
Under ser du koden av denne overgangsfunksjonen skrevet i TypeScript. Variabelen x representerer den absolutte progresjonen av animasjonen i området mellom 0 (starten av animasjonen) og 1 (sluttet av animasjonen).
function (x: number): number {
}Under ser du koden av denne overgangsfunksjonen skrevet i TypeScript. Variabelen x representerer den absolutte progresjonen av animasjonen i området mellom 0 (starten av animasjonen) og 1 (sluttet av animasjonen).
function (x: number): number {
}Sjekk overgang for endringer:
Denne funksjonen:
Denne funksjonen
Lineær funksjon:
Lineær funksjon