Come realizzare bellissime animazioni Web codificate con Mo.JS

Se stai cercando di avviare il tuo sito web, animazioni di bell'aspetto possono farlo brillare. Ci sono molti modi per ottenere questo risultato, semplicemente creando una GIF animata da un film esistente, per imparare a crearla da zero con software come Blender o Maya.

Sono disponibili anche librerie per creare animazioni a livello di codice. Storicamente, i codificatori web utilizzavano jQuery per creare semplici animazioni, ma man mano che il Web si sviluppava e HTML5 diventava il nuovo standard, apparivano nuove opzioni. Le librerie CSS per l'animazione sono diventate incredibilmente potenti con il nuovo framework, insieme alle librerie JavaScript progettate specificamente per l'animazione vettoriale nel browser.

Oggi guarderemo mo.js, uno dei più nuovi ragazzi sul blocco per creare bellissime immagini dal codice. Copriremo alcune funzioni di base, prima di creare una serie di animazioni reattive per l'utente che crei splendidi motivi.

Inserisci Mo.js

Mo.js è una libreria per la creazione di grafica animata per il web con facilità. È progettato per rendere semplice la creazione di cose belle per coloro che non sono troppo esperti di codice, consentendo ai programmatori veterani di scoprire un lato artistico che non hanno mai saputo di avere. Come suggerisce il nome, si basa sul popolare linguaggio di programmazione JavaScript, anche se è implementato in modo tale che chiunque possa cogliere facilmente le basi.

Prima di andare oltre, diamo un'occhiata a ciò che creeremo oggi:

Utilizzeremo CodePen per il progetto di oggi, poiché ci consente di lavorare su tutto nella stessa finestra del browser. Se preferisci, puoi lavorare invece in un editor di tua scelta. Se vuoi saltare il tutorial passo passo, il codice completo è disponibile qui.

Configura una nuova penna e verrai accolto con questa schermata:

Prima di iniziare, dovrai apportare un paio di modifiche. Clicca sul impostazioni icona in alto a destra e vai a JavaScript linguetta.

Stiamo per essere utilizzati Babele come nostro pre-processore di codice, quindi selezionalo dal menu a tendina. Babel rende JavaScript un po 'più facile da capire, oltre a fornire ECMAScript 6 Che cos'è ES6 e cosa i programmatori Javascript devono sapere Cos'è ES6 e cosa i programmatori Javascript devono sapere ES6 fa riferimento alla versione 6 del linguaggio di programmazione ECMA Script (Javascript). Vediamo ora alcuni importanti cambiamenti che ES6 porta a JavaScript. Maggiori informazioni sul supporto per i browser meno recenti. Se non sai cosa significa, non ti preoccupare, ci renderà la vita un po 'più facile qui.

Dobbiamo inoltre importare la libreria mo.js nel progetto. Fai questo cercando mo.js nel Aggiungi script / penne esterni prompt di testo e selezionandolo.

Con queste due cose sul posto, clicca Salva e chiudi. Siamo pronti per iniziare!

Forme di base con Mo.js

Prima di iniziare con la grafica, facciamo qualcosa su quello sfondo bianco accecante nel pannello di visualizzazione. Modificare la proprietà del colore di sfondo scrivendo questo codice nel CSS vetro.

body background: rgba (11,11,11,1); 

La creazione di una forma è un processo semplice e il concetto alla base guida l'intera libreria. Imposta una forma circolare predefinita. Inserisci questo codice nel JS riquadro:

const redCirc = new mojs.Shape (isShowStart: true);

Qui, abbiamo creato un const valore con il nome redCirc e lo ha assegnato a a nuovo mojs.Shape. Se sei totalmente nuovo nella codifica, fai attenzione all'ordine di parentesi qui, e non dimenticare il punto e virgola alla fine!

Finora abbiamo passato senza parametri tranne isShowStart: true, il che significa che apparirà sullo schermo ancor prima di assegnargli un movimento. Vedrai che ha posizionato un cerchio rosa al centro dello schermo:

Questo cerchio è l'impostazione predefinita Forma per mo.js. Possiamo cambiare facilmente questa forma aggiungendo una linea al nostro codice:

const redCirc = new mojs.Shape (isShowStart: true, shape: 'rect');

Per aggiungere più proprietà a un oggetto, utilizziamo una virgola per separarla. Qui, abbiamo aggiunto un forma proprietà e definito come a 'Rect'. Salva la penna e vedrai che la forma predefinita cambia in un quadrato.

Questo processo di passaggio di valori al Forma l'oggetto è come li personalizziamo. In questo momento abbiamo un quadrato che in realtà non fa molto. Proviamo ad animare qualcosa.

Nozioni di base del movimento

Per ottenere qualcosa che sembra un po 'più impressionante, impostiamo un cerchio, con un tratto rosso intorno e senza riempimento all'interno.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', raggio: 15);

Come puoi vedere, abbiamo anche assegnato un larghezza valore per il tratto e a raggio per il cerchio. Le cose stanno già iniziando a sembrare un po 'diverse. Se la tua forma non si aggiorna, assicurati di non aver perso nessuna virgola o virgolette 'rosso' o 'nessuna', e assicurati di aver fatto clic salvare in cima alla pagina.

Aggiungiamo un'animazione a questo. Nell'esempio sopra, questo cerchio rosso appare dove l'utente fa clic, prima di svanire verso l'esterno. Un modo in cui possiamo farlo è cambiando il raggio e l'opacità nel tempo. Modifichiamo il codice:

 raggio: 15:30, opacità: 1: 0, durata: 1000

Cambiando il raggio proprietà e aggiunta opacità e durata proprietà, abbiamo dato le istruzioni di forma da eseguire nel tempo. Questi sono Delta oggetti, tenendo le informazioni di inizio e fine per queste proprietà.

Noterai che non sta ancora accadendo nulla. Questo perché non abbiamo aggiunto il .giocare() funzione per dirgli di eseguire le nostre istruzioni. Aggiungilo tra le parentesi e il punto e virgola e dovresti vedere il tuo cerchio prendere vita.

Ora stiamo arrivando da qualche parte, ma per renderlo davvero speciale, diamo un'occhiata ad alcune possibilità più approfondite.

Ordinare e facilitare con Mo.js

In questo momento, non appena appare il cerchio, inizia a sfumare. Funzionerà perfettamente, ma sarebbe bello avere un po 'più di controllo.

Possiamo farlo con il .poi() funzione. Invece di cambiare il raggio o l'opacità, facciamo in modo che la nostra forma rimanga dove inizia, prima di cambiare dopo un determinato periodo di tempo.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', raggio: 15, duration: 1000). (// fai più cose qui) .giocare();

Ora, la nostra forma apparirà con i valori che abbiamo assegnato, aspettiamo 1000 ms, prima di eseguire qualsiasi cosa inseriamo nel .poi() funzione. Aggiungiamo alcune istruzioni tra parentesi:

 // fai più cose qui strokeWidth: 0, scale: 1: 2, easing: 'sin.in', durata: 500

Questo codice introduce un'altra parte importante dell'animazione. Dove abbiamo istruito il scala per passare da 1 a 2, abbiamo anche assegnato l'andamento basato su onda sinusoidale con sin.in. Mo.js ha una varietà di curve di andamento integrate, con la possibilità per gli utenti avanzati di aggiungere le proprie. In questo caso, la scala nel tempo si verifica in base a un'onda sinusoidale che si curva verso l'alto.

Per una panoramica delle diverse curve, controlla easings.net. Combina questo con il strokeWidth cambiando a 0 sulla durata impostata, e si ha un effetto di scomparsa molto più dinamico.

Le forme sono la base di tutto in Mo.js, ma sono solo l'inizio della storia. Guardiamo Bursts.

Bursting With Potential in Mo.js

UN scoppiare in Mo.js è una raccolta di forme che emana da un punto centrale. Creeremo queste basi per la nostra animazione finita. È possibile chiamare un burst predefinito nello stesso modo in cui si esegue una forma. Facciamo alcune scintille:

const sparks = new mojs.Burst (). play ();

Puoi vedere, semplicemente aggiungendo un vuoto scoppiare oggetto e dicendogli di giocare, otteniamo l'effetto burst predefinito. Possiamo influenzare la dimensione e la rotazione della raffica animando la sua raggio e angolo proprietà:

const sparks = new mojs.Burst (radius: 0:30, easing: 'cubic.out', angle: 0: 90, easing: 'quad.out',). play ();

Abbiamo già aggiunto un raggio e una rotazione personalizzati al nostro burst:

Per farli sembrare più simili a scintille, cambiamo le forme che usa la raffica e quante forme genera la raffica. Lo fai indirizzando le proprietà dei bambini del burst.

const sparks = new mojs.Burst (raggio: 0:30, attenuazione: 'cubic.out', angolo: 0: 90, attenuazione: 'quad.out', conteggio: 50, bambini: forma: 'croce', tratto: 'bianco', punti: 12, raggio: 10, riempimento: 'nessuno', angolo: 0: 360, durata: 300). play ();

Noterai che le proprietà figlio sono le stesse delle proprietà della forma con cui abbiamo già lavorato. Questa volta abbiamo scelto una croce come forma. Tutte e 50 di queste forme ora hanno le stesse proprietà. Sta iniziando a sembrare abbastanza buono! Questa è la prima cosa che l'utente vedrà quando fa clic con il mouse.

Già però possiamo vedere che il tratto rosso della nostra iniziale redCirc la forma sta rimanendo troppo a lungo. Prova a modificarne la durata in modo che entrambe le animazioni combacino. Dovrebbe finire per sembrare qualcosa del genere:

Siamo lontani dall'essere finiti con la nostra animazione, ma prendiamoci un momento per renderlo reattivo all'utente.

L'evento principale

Useremo un gestore di eventi per attivare le nostre animazioni nella posizione in cui l'utente fa clic. Alla fine del tuo blocco di codice, aggiungi questo:

document.addEventListener ('click', function (e) );

Questo pezzo di codice ascolta i clic del mouse ed esegue tutte le istruzioni che ci sono tra parentesi. Possiamo aggiungere il nostro redCirc e scintille oggetti a questo ascoltatore.

document.addEventListener ('click', function (e) redCirc .tune (x: e.pageX, y: e.pageY,) .replay (); sparks .tune (x: e.pageX, y: e.pageY) .replay (););

Le due funzioni che chiamiamo qui sono .sintonizzare() e .replay(). La funzione di riproduzione è simile alla funzione di riproduzione, anche se specifica che l'animazione deve ricominciare dall'inizio ogni volta che si fa clic.

Il sintonizzare la funzione passa i valori al nostro oggetto in modo da poter cambiare le cose quando viene attivato. In questo caso stiamo passando le coordinate della pagina su cui è stato fatto clic sul mouse e assegnando di conseguenza la posizione xey della nostra animazione. Salva il tuo codice e prova a fare clic sullo schermo. Noterai un paio di problemi.

In primo luogo, la nostra animazione iniziale appare ancora nel mezzo dello schermo, anche se l'utente non fa clic su nulla. In secondo luogo, l'animazione non viene attivata nel punto del mouse, ma spostata verso il basso e verso destra. Possiamo sistemare entrambe queste cose facilmente.

La nostra forma e scoppio hanno il .giocare() alla fine dei rispettivi blocchi di codice. Non abbiamo più bisogno di questo come .replay() viene chiamato nel gestore dell'evento. Puoi rimuovere .play () da entrambi i blocchi di codice. Per lo stesso motivo, puoi rimuovere isShowStart: true anche perché non abbiamo più bisogno di mostrarlo all'inizio.

Per risolvere il problema di posizionamento, sarà necessario impostare i valori di posizione per i nostri oggetti. Come ricorderai sin dalla prima forma, mo.js li colloca al centro della pagina per impostazione predefinita. Quando questi valori sono combinati con la posizione del mouse, crea l'offset. Per eliminare questo offset, aggiungi semplicemente queste linee a entrambi redCirc e scintille oggetti:

a sinistra: 0, in alto: 0,

Ora gli unici valori di posizione che i nostri oggetti assumono sono i valori di posizione del mouse trasmessi dal listener di eventi. Ora le cose dovrebbero funzionare molto meglio.

Questo processo di aggiunta di oggetti nel gestore eventi è il modo in cui verranno attivate tutte le nostre animazioni, quindi ricorda di aggiungere ogni nuovo oggetto ad esso da ora in poi! Ora che abbiamo le nozioni di base su come le vogliamo, aggiungiamo alcune raffiche più grandi e più luminose.

Ottenere psichedelico

Iniziamo con alcuni triangoli rotanti. L'idea qui era di creare un effetto stroboscopico ipnotico, e impostarlo è in realtà abbastanza semplice. Aggiungi un altro burst con questi parametri:

const triangles = new mojs.Burst (raggio: 0: 1000, attenuazione: 'cubic.out', angolo: 1080: 0, attenuazione: 'quad.out', a sinistra: 0, inizio: 0, conteggio : 20, bambini: forma: 'poligono', punti: 3, raggio: 10: 100, riempimento: ['rosso', 'giallo', 'blu', 'verde'], durata: 3000) ;

Tutto qui dovrebbe essere abbastanza familiare, anche se ci sono un paio di nuovi punti. Noterai che invece di definire la forma come un triangolo, l'abbiamo chiamata a poligono prima di assegnare il numero di punti ha come 3.

Abbiamo anche dato riempire funziona con una serie di colori con cui lavorare, ogni quinto triangolo tornerà al rosso e il modello continuerà. L'alto valore del angolo l'impostazione fa ruotare il burst abbastanza velocemente per produrre il suo effetto stroboscopico.

Se il codice non funziona, assicurati di aver aggiunto l'oggetto triangoli alla classe listener di eventi come abbiamo fatto con gli oggetti precedenti.

Abbastanza psichedelico! Aggiungiamo un'altra raffica per seguirla.

Pentagoni danzanti

Possiamo usare qualcosa di quasi identico al nostro triangoli oggetto di fare lo scoppio che lo segue. Questo codice leggermente modificato produce esagoni di filatura sovrapposti a colori vivaci:

const pentagons = new mojs.Burst (raggio: 0: 1000, easing: 'cubic.out', angolo: 0: 720, easing: 'quad.out', a sinistra: 0, inizio: 0, conteggio : 20, bambini: forma: 'poligono', raggio: 1: 300, punti: 5, riempimento: ['viola', 'rosa', 'giallo', 'verde'], ritardo: 500, durata: 3000);

Il principale cambiamento qui è che abbiamo aggiunto a ritardo di 500 ms, in modo che la raffica non inizi prima dei triangoli. Modificando alcuni valori, l'idea era di far girare la raffica nella direzione opposta ai triangoli. Per un felice incidente, quando i pentagoni appaiono, l'effetto stroboscopico dei triangoli fa sembrare che stiano girando insieme.

Un po 'di casualità

Aggiungiamo un effetto che fa uso di valori casuali. Crea un burst con queste proprietà:

const redSparks = new mojs.Burst (left: 0, top: 0, count: 8, radius: 150: 350, angle: 0:90, easing: 'cubic.out', children: shape: 'linea', tratto: 'rosso': 'trasparente', trattoWidth: 5, scalaX: 0,5: 0, gradiShift: 'rand (-90, 90)', raggio: 'rand (20, 300)' , durata: 500, ritardo: 'rand (0, 150)',);

Questa raffica creerà delle linee che iniziano col rosso e sfumano verso la trasparenza, restringendosi nel tempo. Ciò che rende interessante questo componente è che i valori casuali vengono utilizzati per determinare alcune delle sue proprietà.

Il degreeShift dà all'oggetto figlio un angolo iniziale. Randomizzando questo, dà una raffica totalmente diversa ad ogni clic. I valori casuali sono usati anche per raggio e ritardo funzioni per aggiungere all'effetto caotico.

Ecco l'effetto di per sé:

Dato che qui stiamo usando valori casuali, dobbiamo aggiungere un metodo extra al nostro gestore di eventi per l'oggetto:

redSparks .tune (x: e.pageX, y: e.pageY) .replay () .generate ();

Il creare() la funzione calcola nuovi valori casuali ogni volta che viene chiamato l'evento. Senza questa opzione, la forma sceglierà i valori casuali la prima volta che viene richiamata e continuerà a utilizzare tali valori per ogni chiamata successiva. Questo rovinerebbe completamente l'effetto, quindi assicurati di aggiungerlo!

Puoi utilizzare valori casuali per quasi tutti gli elementi di oggetti mo.js e sono un modo semplice per creare animazioni uniche.

Tuttavia, la casualità non è l'unico modo per aggiungere movimenti dinamici alle animazioni. Diamo un'occhiata a barcollare funzione.

Linee sconvolgenti

Per mostrare come il barcollare la funzione funziona, stiamo andando a fare qualcosa di simile a una Catherine Wheel. Crea un nuovo burst con questi parametri:

const lines = new mojs.Burst (raggio: 0: 1000, easing: 'cubic.out', angolo: 0: 1440, attenuazione: 'cubic.out', a sinistra: 0, inizio: 0, conteggio : 50, bambini: forma: 'linea', raggio: 1: 100, attenuazione: 'elastic.out', riempimento: 'nessuno', tratto: ['rosso', 'arancione'], ritardo: 'scaglionato (10) ', durata: 1000);

Ormai tutto è familiare, una raffica crea 50 bambini che sono linee rosse o arancioni. La differenza qui è che passiamo al ritardo proprietà a sfalsamento (10) funzione. Questo aggiunge 10ms di ritardo tra l'emissione di ogni bambino, dandogli l'effetto rotante che stiamo cercando.

La funzione scaglionamento non utilizza valori casuali, quindi non ti servirà a creare funzione nel gestore eventi questa volta. Vediamo tutto ciò che abbiamo finora in azione:

Potremmo facilmente fermarci qui, ma aggiungiamo un altro burst per completare questo progetto.

Piazze intelligenti

Per quest'ultimo scoppio, facciamo qualcosa usando i rettangoli. Aggiungi questo oggetto al codice e al listener di eventi:

const redSquares = new mojs.Burst (raggio: 0: 1000, easing: 'cubic.out', angolo: 360: 0, easing: 'quad.out', a sinistra: 0, inizio: 0, conteggio : 20, bambini: forma: 'rect', raggioX: 1: 1000, raggioY: 50, punti: 5, riempimento: 'nessuno', tratto: 'rosso': 'arancione', trattoWidth: 5 : 15, ritardo: 1000, durata: 3000);

Questo oggetto non aggiunge nulla di nuovo a ciò a cui abbiamo già lavorato oggi, ma è incluso solo per mostrare come i disegni geometrici complessi possano essere facilmente creati attraverso il codice.

Questo non era il risultato previsto di questo oggetto quando è stato creato nelle fasi di test della scrittura di questo tutorial. Una volta eseguito il codice, è diventato chiaro che mi ero imbattuto in qualcosa di molto più bello di quanto avrei potuto fare apposta!

Con questo oggetto finale aggiunto, abbiamo finito. Vediamo l'intera cosa in azione.

Mo.js: uno strumento potente per animazioni Web

Questa semplice introduzione a mo.js copre gli strumenti di base necessari per creare bellissime animazioni. Il modo in cui questi strumenti vengono utilizzati può creare quasi tutto, e per molte attività le librerie web sono una semplice alternativa all'utilizzo di Photoshop, After Effects o altri software costosi.

Questa libreria è utile per coloro che lavorano sia in programmazione che in sviluppo Web. Programmazione vs. Sviluppo Web: qual è la differenza? Programmazione e sviluppo Web: qual è la differenza? Potresti pensare che i programmatori di applicazioni e gli sviluppatori web facciano lo stesso lavoro, ma questo è lontano dal vero. Ecco le principali differenze tra programmatori e sviluppatori web. Per saperne di più, la gestione degli eventi utilizzata nel progetto potrebbe essere facilmente utilizzata per creare pulsanti e testo reattivi sui siti Web o nelle app. Divertiti con questo: non ci sono errori, solo felici incidenti!

Scopri di più su: JavaScript.