Come realizzare bellissime animazioni web codificate con Mo.JS

Se stai cercando crea il tuo sito web , bellissime animazioni possono farlo brillare. Ci sono diversi modi per raggiungere questo obiettivo, semplicemente fare una GIF animata da un pezzo di film esistente, per imparare a crearne uno da zero con software come Miscelatore o maya .

Sono disponibili anche librerie per creare animazioni a livello di codice. Storicamente, i programmatori web usavano jQuery per creare semplici animazioni, ma man mano che il web si sviluppava e... HTML5 è diventato il nuovo standard, sono apparse 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 esamineremo mo.js, uno dei nuovi arrivati ​​sul blocco per la creazione di bellissime immagini dal codice. Tratteremo alcune funzioni di base, prima di creare una serie di animazioni reattive per l'utente che crei bellissimi modelli.

Entra Mo.js

Mo.js è una libreria per creare con facilità grafica animata per il web. È 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 sapevano di avere. Come suggerisce il nome, si basa sul popolare linguaggio di programmazione JavaScript, sebbene sia implementato in modo tale che chiunque possa apprendere facilmente le basi.

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

Useremo CodicePen per il progetto di oggi, poiché ci permette di lavorare su tutto nella stessa finestra del browser. Se preferisci, puoi lavorare in un editore a tua scelta Invece. Se vuoi saltare il tutorial passo passo, il codice completo è disponibile qui.

Imposta 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 scheda.

Utilizzeremo Babele come nostro preprocessore del codice, quindi selezionalo dal menu a discesa. Babel rende JavaScript un po' più facile da capire, oltre a fornire ECMAScript 6 supporto per browser meno recenti. Se non sai cosa significa, non preoccuparti , ci renderà la vita un po' più facile qui.

---

---

Abbiamo anche bisogno di importare la libreria mo.js nel progetto. Fai questo cercando mo.js nel Aggiungi script/penne esterni messaggio di testo e selezionandolo.

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

Forme di base con Mo.js

Prima di iniziare con la grafica, facciamo qualcosa per lo sfondo bianco accecante nel riquadro di visualizzazione. Cambia la proprietà del colore di sfondo scrivendo questo codice nel CSS pane.

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

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

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

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

Finora non abbiamo passato nessun parametro tranne isShowStart:true , il che significa che apparirà sullo schermo anche prima che gli abbiamo assegnato qualsiasi 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, usiamo una virgola per separarlo. Qui abbiamo aggiunto un forma proprietà e l'ha definita come a 'retto' . Salva la penna e vedrai invece la forma predefinita cambiare in un quadrato.

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

Nozioni di base sul movimento

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

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

Come puoi vedere, abbiamo anche assegnato a larghezza valore alla corsa, 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 alcuna virgola o virgoletta singola in giro 'netto' o 'nessuno' e assicurati di aver cliccato Salva 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 per farlo accadere è cambiare il raggio e l'opacità nel tempo. Modifichiamo il codice:

radius: {15:30},
opacity: {1:0},
duration:1000

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

Noterai che non sta ancora succedendo nulla. Questo perché non abbiamo aggiunto il .giocare a() funzione per dirgli di eseguire le nostre istruzioni. Aggiungilo tra le parentesi quadre 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 semplificare con Mo.js

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

Possiamo farlo con il .poi() funzione. Piuttosto che cambiare il nostro raggio o 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',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

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

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

Questo codice introduce un'altra parte importante dell'animazione. Dove abbiamo istruito il scala per passare da 1 a 2, abbiamo anche assegnato un allentamento basato sull'onda sinusoidale con peccato.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 avviene secondo un'onda sinusoidale curva verso l'alto.

Per una panoramica visiva delle diverse curve, dai un'occhiata easings.net . Combina questo con il larghezza del tratto passando a 0 durante la nostra durata impostata e hai 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 scoppia .

Pieno di potenziale in Mo.js

A Scoppiare in Mo.js è una collezione di forme che emana da un punto centrale. Faremo di questi la base della nostra animazione finita. Puoi chiamare un burst predefinito nello stesso modo in cui fai una forma. Facciamo qualche scintilla:

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 del burst animandolo 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 alla nostra raffica:

Per farli sembrare più scintille, cambiamo le forme usate dal burst e quante forme genera il burst. Lo fai affrontando le proprietà dei figli del burst.

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration: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 queste forme ora hanno le stesse proprietà. Comincia a sembrare abbastanza buono! Questa è la prima cosa che l'utente vedrà quando farà clic con il mouse.

Già però possiamo vedere che il tratto rosso della nostra iniziale redCirc la forma rimane troppo a lungo. Prova a cambiarne la durata in modo che entrambe le animazioni combacino. Dovrebbe finire per assomigliare a questo:

Siamo lontani dall'aver finito con la nostra animazione, ma prendiamoci un momento per renderla reattiva per l'utente.

L'evento principale

Utilizzeremo 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 tra parentesi per noi. Possiamo aggiungere il nostro redCirc e scintille si oppone 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 .rigiocare() . 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 su di essa.

Il sintonizzare la funzione passa i valori al nostro oggetto in modo da poter cambiare le cose quando viene attivata. In questo caso stiamo passando le coordinate della pagina in cui è stato cliccato il 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.

Innanzitutto, la nostra animazione iniziale viene ancora visualizzata al centro dello schermo, anche se l'utente non fa clic su nulla. In secondo luogo, l'animazione non viene attivata al punto del mouse, ma spostata verso il basso ea destra. Possiamo sistemare entrambe queste cose facilmente.

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

Per risolvere il problema di posizionamento avremo bisogno di impostare i valori di posizione per i nostri oggetti. Come ricorderai dalla nostra primissima forma, mo.js li mette 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 righe a entrambi i redCirc e scintille oggetti:

left: 0,
top: 0,

Ora gli unici valori di posizione che assumono i nostri oggetti sono i valori di posizione del mouse passati dall'ascoltatore di eventi. Ora le cose dovrebbero funzionare molto meglio.

Questo processo di aggiunta di oggetti nel gestore eventi è il modo in cui attiveremo tutte le nostre animazioni, quindi ricordati di aggiungerci ogni nuovo oggetto d'ora in poi! Ora che abbiamo le basi che funzionano come vogliamo, aggiungiamo alcune raffiche più grandi e luminose.

Diventare psichedelico

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

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

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

Abbiamo anche dato riempire funzionerà una serie di colori con cui lavorare, ogni quinto triangolo tornerà al rosso e il motivo continuerà. L'alto valore del angolo l'impostazione fa girare la raffica abbastanza velocemente da produrre il suo effetto stroboscopico.

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

Piuttosto psichedelico! Aggiungiamo un altro burst per seguirlo.

Pentagoni danzanti

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

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

Il cambiamento principale qui è che abbiamo aggiunto a ritardo di 500 ms, in modo che il burst non inizi fino a dopo i triangoli. Modificando alcuni valori, l'idea qui era di far girare la raffica nella direzione opposta ai triangoli. Per fortuna, quando compaiono i pentagoni, l'effetto stroboscopico dei triangoli fa sembrare che stiano ruotando 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: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

Questa esplosione creerà linee che iniziano in rosso e svaniscono in trasparenza, restringendosi nel tempo. Ciò che rende interessante questo componente è che vengono utilizzati valori casuali per determinare alcune delle sue proprietà.

Il gradoSpostamento assegna all'oggetto figlio un angolo di partenza. Casualizzando questo, dà una raffica completamente diversa ad ogni clic. I valori casuali sono utilizzati anche per il raggio e ritardo funzioni da aggiungere all'effetto caotico.

Ecco l'effetto da solo:

Poiché 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 questo, la forma sceglierebbe valori casuali la prima volta che viene chiamata e continuerà a utilizzare quei valori per ogni chiamata successiva. Questo rovinerebbe totalmente l'effetto, quindi assicurati di aggiungerlo!

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

rotazione dei video su Windows Media Player

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

Linee sbalorditive

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

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

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

La funzione scaglionamento non fa uso di valori casuali, quindi non avrai bisogno di a creare funzione nel gestore eventi questa volta. Vediamo tutto ciò che abbiamo finora in azione:

Potremmo facilmente fermarci qui, ma aggiungiamo solo un'altra raffica per completare questo progetto.

Quadrati intelligenti

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

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

Questo oggetto non aggiunge nulla di nuovo a ciò su cui abbiamo già lavorato oggi, è incluso semplicemente per mostrare come modelli geometrici complessi possono 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 ultimo oggetto aggiunto, abbiamo finito. Vediamo il tutto in azione.

Mo.js: uno strumento potente per le animazioni web

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

Questa libreria è utile per chi lavora sia nella programmazione che nello sviluppo web, la gestione degli eventi utilizzata nel progetto potrebbe essere facilmente utilizzata per creare pulsanti e testo reattivi su siti Web o in app. Divertiti: non ci sono errori, solo felici incidenti!

Condividere Condividere Tweet E-mail Vale la pena eseguire l'aggiornamento a Windows 11?

Windows è stato ridisegnato. Ma è abbastanza per convincerti a passare da Windows 10 a Windows 11?

Leggi Avanti Argomenti correlati

• Programmazione
• JavaScript

Circa l'autore Ian Buckley(216 articoli pubblicati)

Ian Buckley è un giornalista freelance, musicista, performer e produttore di video che vive a Berlino, in Germania. Quando non scrive o sul palco, armeggia con l'elettronica o il codice fai-da-te nella speranza di diventare uno scienziato pazzo.

Altro da Ian Buckley

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti