Guida alle Funzioni di Interpolazione

Le funzioni di interpolazione specificano il cambiamento di un parametro con il passare del tempo.

Gli oggetti nella vita reale non si muovono istantaneamente, e non hanno quasi mai una velocità costante. Quando apriamo un cassetto, all'inizio lo spostiamo rapidamente ed andiamo rallentando alla fine. Fai cadere un oggetto e lo vedrai accelerare verso il basso, per poi rimbalzare all'impatto con il pavimento.

Questa pagina ti aiuta a scegliere la giusta funzione di interpolazione.

Open Source
Aiutaci a tradurre il sito nella tua lingua
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

x
t
CSS
In CSS, le proprietà transition e animation ti permettono di specificare una funzione di interpolazione.
.block {
	transition: transform 0.6s ;
}
Modifica su cubic-bezier.com.
In CSS, questa funzione può essere implementata utilizzando @keyframes:
Dimensione
Caricamento...
Posizione
Caricamento...
Trasparenza
Caricamento...
PostCSS
In PostCSS, una funzione di interpolazione è molto più facile da descrivere. Esiste un plugin postcss-easings che estrapola le informazioni di transizione dal sito stesso.
.block {
	transition: transform 0.6s ;
}
La dichiarazione viene convertita in quella descritta sopra.
Purtroppo, questa funzione di interpolazione non può essere impostata con alcun plugin PostCSS. Può essere implementata con @keyframes, vedi sopra.
Gradiente
È possibile tracciare un gradiente utilizzando postcss-easing-gradients.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Funzione matematica
Sotto puoi vedere il codice di questa funzione di interpolazione, scritto in TypeScript. La variabile x rappresenta il progresso (assoluto) dell'animazione tra i valori 0 (inizio dell'animazione) e 1 (fine dell'animazione).
function (x: number): number {
}
Sotto puoi vedere il codice di questa funzione di interpolazione, scritto in TypeScript. La variabile x rappresenta il progresso (assoluto) dell'animazione tra i valori 0 (inizio dell'animazione) e 1 (fine dell'animazione).
function (x: number): number {
}
Visualizza interpolazione:
Funzione selezionata:
Funzione selezionata
Funzione lineare:
Funzione lineare