Lista e funksioneve të shpejtësisë për animacione

Funksionet e shpejtësisë specifikojnë ndryshimin e parametrit në varësi të kohës.

Objektet reale nuk fillojnë dhe ndalen menjëherë, dhe pothuajse asnjëherë nuk lëvizin me shpejtësi konstante. Kur hapim një sirtar, në fillim e lëvizim shpejt, dhe ngadalsojmë kur e nxjerrim jashtë. Nëse hedhim diçka në tokë, fillimisht bie poshtë me shpejtësi dhe pastaj kthehet lart pasi godet dyshemenë.

Kjo faqe ju ndihmon të zgjidhni funksionin e duhur të animacionit.

Open Source

Ndihmo përkthimin në gjuhën tënde

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

Të gjitha funksionet e shpejtësitë

CSS

Në CSS, cilësimet e 'transition' dhe 'animation' të lejojnë të specifikosh një funksion shpejtësie.

.block {
	transition: transform 0.6s ;
}

Redakto në cubic-bezier.com.

Në CSS, këto funksione mund të implementohen duke përdorur @keyframes:

Madhësitë

Ngarkimi...

Pozicionet

Ngarkimi...

Transparenca

Ngarkimi...

PostCSS

Në PostCSS, funksionet e shpejtësisë janë më të thjeshta per t'u përshkruar. Ekziston një plugin postcss-easings që merr informacionin e tranzicionit nga ky sajt.

.block {
	transition: transform 0.6s ;
}

Kjo deklaratë konvertohet në atë të përshkruar më lart.

Fatkeqësisht, funksionet e shpejtësisë nuk mund të vendosen me një plugin PostCSS Mund të arrihet me @keyframes, shihni më lart.

Gradienti

Është e mundur të vizatojmë një gradient duke përdorur postcss-easing-gradients.

.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}

Funksion matematikor

Më poshtë do të shihni funksionet e shpejtësisë të shkruara në TypeScript. Variabla x përfaqëson progresin absolut të animacionit në kufijtë e 0 (fillimi i animacionit) dhe 1 (fundit e animacionit).

function (x: number): number {

}

function (x: number): number {

}

Kontrolloni shpejtësinë për ndryshime:

Funksioni aktual:

Funksioni aktual

Funksioni linear:

Funksioni linear