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

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

Tutte le interpolazioni

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 {

}

function (x: number): number {

}

Visualizza interpolazione:

Funzione selezionata:

Funzione selezionata

Funzione lineare:

Funzione lineare