Share
Popmotion è una libreria di animazioni JavaScript funzionale. Rispetto ad altre librerie come GreenSock o Anime.js, Popmotion è di basso livello e non professionale.
Comprende un sacco di funzioni, come la fisica primaverile e il puntatore, in un file molto piccolo (11.5kb).
Permette agli sviluppatori di scrivere le proprie caratteristiche usando semplici funzioni, piuttosto che aspettare che l'autore della libreria le aggiunga.
Significa anche che è altrettanto semplice animare oggetti 3D, grafici o componenti React così come animare elementi DOM o SVG.
Questa flessibilità può rendere più rapida la curva di apprendimento iniziale rispetto ad altre librerie. Quindi, in questa serie di tutorial, impareremo le basi delle potenti animazioni di Popmotion. Inizieremo con il cavallo di battaglia del mondo dell'animazione, il gemello.
Popmotion supporta una varietà di metodi di installazione. In produzione, consiglio di installare tramite npm, in quanto ciò consente di importare solo i bit necessari, risparmiando ancora più spazio.
Tuttavia, per questo tutorial, puoi seguire questo CodePen, che è stato configurato con l'ultima versione di Popmotion.
Per chi non conosce, una transizione tra un numero e un altro per un periodo di tempo predeterminato. Se hai usato una transizione CSS, Popmotion gemello la funzione funziona esattamente allo stesso modo.
Possiamo importare gemello così:
const tween = popmotion;
Di default, gemello anima tra 0 e 1 per una durata di 300 millisecondi. Se apri la tua console, puoi provarla tu stesso:
Accentsconagua
tween (). start (update: v => console.log (v), complete: () => console.log ('complete!'));Ma non vogliamo animare la console: vogliamo animare la palla. Per questo, Popmotion include un'altra funzione, styler.
Nota: In questo primo esempio, abbiamo definito sia il aggiornaree completare funzioni. Ma se fornisci inizio con una sola funzione, la assegna automaticamente a aggiornare.
styler è usato per creare interfacce get / set per stili HTML e SVG ottimizzati per l'uso con le animazioni (da qualsiasi libreria!).
Nell'esempio sopra, gemello sta emettendo un numero, quindi potremmo ovviamente impostare l'opacità della palla in questo modo (provalo):
const ball = document.querySelector ('. ball'); tween (). start (v => ball.style.opacity = v);però, styler ha i seguenti vantaggi:
trasformare puntelli da impostare individualmente, consentendo l'animazione indipendente di oggetti di scena come scala e translateX.translateX (per esempio) senza aggiungere 'Px'.Non sei inoltre limitato a utilizzarlo all'interno di un'animazione. È possibile impostare manualmente lo stile di un elemento mentre altri si animano e la modifica verrà automaticamente pianificata e raggruppata insieme alle altre.
Quindi importiamolo:
const tween, styler = popmotion;
Crea lo styler per le palle:
const ballStyler = styler (palla);
Ora possiamo usare ballStyler per impostare e animare qualsiasi proprietà della palla. ballStyler.set è flessibile. Può impostare una singola proprietà:
ballStyler.set ('background', '# f00');O più proprietà:
ballStyler.set (x: 100, y: 100);
Vogliamo animare opacità per ora, quindi cambiamo la nostra animazione:
tween (). start (v => ballStyler.set ('opacity', v));impostato può anche essere al curry. Fornendo solo il nome di una proprietà, restituirà una funzione setter per quel sostegno. Quindi possiamo chiarire quanto sopra scrivendo:
. Tween () start (ballStyler.set ( 'opacità'));
Finora, abbiamo solo animato la palla usando l'impostazione predefinita gemello proprietà. Diamo un'occhiata a quanto versatile a gemello può essere.
gemello accetta un argomento opzionale, un oggetto di proprietà interpolate. Diamo un'occhiata ad alcuni dei puntelli più comunemente usati:
a partire dal/a UN gemello può essere tra due stati qualsiasi. Definiamo questi con a partire dal e a.
Animiamo translateX riscrivendo 'opacità' a 'X'. Quindi, passa a partire dal e a oggetti di scena:
interpolazione (da: 0, a: 300)
La tua palla ora si sposta da sinistra a destra di 300 px.
Tuttavia, ho detto che a gemello può essere tra due stati, non solo numeri. Se forniamo a partire dal e a oggetti di numeri e / o colori, possiamo animare più proprietà contemporaneamente.
Prova questo:
interpolazione (da: x: 0, background: '# 198FE3', a: x: 300, background: '# FF1C68'). start (ballStyler.set);
Questo è un modo semplice per animare più oggetti di scena contemporaneamente.
durata è definito in millisecondi. Per impostazione predefinita, un'interpolazione impiega 300 ms, ma se lo impostiamo durata a 1000, ci vorrà un secondo:
interpolazione (durata: 1000, da: 0, a: 300). start (ballStyler.set ('x'));Le funzioni di attenuazione vengono utilizzate nell'interpolazione per modificare la velocità di movimento durante l'animazione.
Nella vita reale, gli oggetti non si avviano o si fermano alla velocità di destinazione. A seconda dell'oggetto, accelerano gradualmente, o rallentano gradualmente, o entrambi.
Una funzione di andamento funziona semplicemente prendendo il progresso della Tween, definito come un numero intermedio 0 e 1, e restituendone uno nuovo.
Non hai bisogno di sapere come realizzare queste funzioni perché Popmotion ti offre un sacco.
Importali:
const easing, tween, styler = popmotion;
Di default, alleviare è impostato per easing.easeOut. Quando una funzione si attenua, significa inizia veloce e termina lentamente.
Questo è stato scelto come predefinito perché credo che la maggior parte dell'animazione nelle interfacce utente debba essere avviata come risultato dell'azione dell'utente. Avviando velocemente e finendo lentamente, l'utente si sentirà come se avessero impartito la loro energia, tramite il loro tocco o clic, direttamente nell'interfaccia. Sembra scattante, vivo e reattivo.
Per molte animazioni lontane dall'input dell'utente, o da sole, può sembrare un po 'meno fastidioso usare un'animazione che faciliti, come easing.easeInOut o easing.anticipate, che fa uno scherzo divertente prima di animare.
Infine, c'è il easing.cubicBezier funzione, che crea una nuova funzione di andamento basata su una curva di andamento, proprio come le transizioni CSS. Ciò fornisce un enorme livello di controllo e flessibilità sul movimento.
Prova ad applicare alcuni di questi alla tua animazione mentre giochi durata per vedere come influenza la sensazione e il carattere di esso.
Le animazioni possono essere ripetute in tre modi diversi: ciclo continuo, yoyo, e Flip.
Ciclo continuo avvia l'animazione dall'inizio. yoyo rispecchia l'interpolazione eseguendola all'indietro. E Flip lo esegue all'indietro eribalta la funzione di andamento.
Uno di questi può essere impostato per interpolazione e ciascuno viene impostato come un numero che indica il numero di volte per ripetere l'animazione. Per ripetere per sempre, semplicemente passare Infinito:
interpolazione (yoyo: infinito, da: 0, a: 300). start (ballStyler.set ('x'));Quando viene avviata un'interpolazione, restituisce i controlli di riproduzione che possiamo usare per controllare quell'animazione.
const controls = tween (). start (console.log);
Nell'esempio sopra, controlli avrà accesso a tutti questi metodi di riproduzione, come Stop, pausa, e curriculum vitae:
const controls = tween (duration: 1000, from: 0, to: 300). start (ballStyler.set ('x')); setTimeout (() => controls.stop (), 500);Possiamo usare questi controlli di riproduzione per pausa e poi cercare attraverso l'interpolazione:
const controls = tween (duration: 1000, from: 0, to: 300). start (ballStyler.set ('x')); controls.pause (); controls.seek (0,5);Con questo, possiamo creare un'animazione scrubbable! In un prossimo tutorial, esploreremo come usare Popmotion pointer funzione per creare una barra di scorrimento, ma per ora è possibile scrub uno gemello con un secondo tween, per vedere questo in azione:
const controls = tween (from: 0, to: 300). start (ballStyler.set ('x')); controls.pause (); interpolazione (durata: 1000) .start (controls.seek);Per semplici transizioni da a-b, gemello è eccellente. Per sequenze più complesse di interpolazioni, Popmotion offre un'altra funzione chiamata i fotogrammi chiave.
Importiamolo ora:
const keyframes, easing, tween, styler = popmotion;
i fotogrammi chiave interpolazioni attraverso aserie di stati lineari. Forniamo questi stati al suo valori proprietà:
fotogrammi chiave (valori: [0, -150, 150, 0], durata: 2000). start (ballStyler.set ('x'));Piace gemello, possiamo anche definire questi stati come oggetti. Quindi per muovere la palla in un quadrato, possiamo scrivere:
fotogrammi chiave (valori: [x: 0, y: 0, x: -150, y: -150, x: -150, y: 150, x: 150, y: 150, x: 150, y: -150, x: 0, y: 0], durata: 2000). start (ballStyler.set);
Di default, i fotogrammi chiave assegnerà ciascuna di queste interpolazioni a una quota uguale di quella complessiva durata.
Fornendo a volte array, possiamo contrassegnare ciascuno di questi stati con un numero compreso tra 0 e 1. 0 rappresenta l'inizio dell'animazione, e 1 rappresenta la fine:
fotogrammi chiave (valori: [0, -150, 150, 0], ore: [0, 0,1, 0,9, 1], durata: 2000). start (ballStyler.set ('x'));In questo modo, possiamo regolare la lunghezza dell'animazione senza dover commentare ogni singolo segmento.
Permette anche ad ogni animazione di essere personalizzata con il easing proprietà:
fotogrammi chiave (valori: [0, -150, 150, 0], tempi: [0, 0,1, 0,9, 1], attenuazioni: [easing.easeIn, easing.linear, easing.easeOut], durata: 2000). avviare (ballStyler.set ( 'x'));
Perché i fotogrammi chiave è solo un gemello, possiamo regolare la sua riproduzione generale con tutte le stesse proprietà come alleviare e ciclo continuo, e controllalo con tutti gli stessi metodi che abbiamo imparato in precedenza.
Il gemello e i fotogrammi chiave le funzioni ti permettono di creare animazioni sia semplici che complesse.
styler porta i propri vantaggi, come l'utilizzo al di fuori delle animazioni, la standardizzazione dei modelli di trasformazione CSS e SVG e il rendering di batch per prestazioni di animazione elevate.
In questo tutorial, abbiamo coperto solo un paio delle animazioni offerte da Popmotion. Nella prossima puntata, esploreremo il puntatore e le animazioni basate sulla velocità come fisica e primavera.
Le animazioni basate sulla velocità possono essere utilizzate per creare interfacce utente naturali che reagiscono realisticamente all'input dell'utente. Ci vediamo lì!
