Com fer animacions web codificades amb Mo.JS

Si ho desitgeu inicia el teu propi lloc web , unes animacions d’aspecte bonic poden fer-la brillar. Hi ha múltiples maneres d’aconseguir-ho, des de simplement fent un GIF animat des d’una peça de pel·lícula existent, fins a aprendre a fer-la vostra des de zero amb programari com Batedora o bé Maya .

També hi ha biblioteques disponibles per crear animacions per programació. Històricament, els codificadors web utilitzaven jQuery per crear animacions senzilles, però a mesura que es desenvolupava el web i HTML5 es va convertir en el nou estàndard, van aparèixer noves opcions. Les biblioteques CSS per a l'animació es van convertir en un nou sistema de gran abast, juntament amb les biblioteques JavaScript dissenyades específicament per a l'animació vectorial al navegador.

---

---

Avui veurem mo.js, un dels nens més nous del bloc per crear imatges precioses a partir del codi. Abastarem algunes funcions bàsiques abans de crear una sèrie d'animació reactiva per a l'usuari que cree patrons bonics.

Introduïu Mo.js

Mo.js és una biblioteca per crear gràfics en moviment per al web amb facilitat. Està dissenyat per fer que la creació de coses boniques sigui senzilla per a aquells que no tenen massa coneixements de codi, alhora que permet als programadors veterans descobrir un vessant artístic que mai no sabien que tenien. Com el seu nom indica, es basa en el popular llenguatge de programació JavaScript, tot i que està implementat de manera que tothom pugui recollir els conceptes bàsics fàcilment.

Abans d’anar més enllà, donem un cop d’ull al que anem a crear avui:

Ho farem servir CodePen per al projecte d'avui, ja que ens permet treballar en tot a la mateixa finestra del navegador. Si ho preferiu, podeu treballar en un editor que trieu en canvi. Si voleu ometre el tutorial pas a pas, el codi complet està disponible aquí.

Configureu un bolígraf nou i us rebrà aquesta pantalla:

---

---

Abans de començar, haureu de fer un parell de canvis. Feu clic al botó Configuració icona a la part superior dreta i aneu a JavaScript fitxa.

Anem a utilitzar Babel com a preprocessador de codi, seleccioneu-lo al menú desplegable. Babel facilita la comprensió de JavaScript, a més de proporcionar-lo ECMAScript 6 suport per a navegadors antics. Si no saps què significa això, no us preocupeu , aquí només ens facilitarà la vida.

---

---

També hem d’importar la biblioteca mo.js al projecte. Feu això cercant mo.js al Afegiu scripts / bolígrafs externs i seleccioneu-lo.

Amb aquestes dues coses al seu lloc, feu clic Desa i tanca . Estem preparats per començar!

Formes bàsiques amb Mo.js

Abans de començar amb els gràfics, fem alguna cosa sobre aquell fons blanc i encegador al tauler de visualització. Canvieu la propietat del color de fons escrivint aquest codi al fitxer CSS pa.

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

Crear una forma és un procés senzill i el concepte que hi ha darrere condueix tota la biblioteca. Configurem una forma de cercle predeterminada. Introduïu aquest codi al fitxer JS pa:

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

Aquí hem creat un fitxer const valor amb el nom redCirc i l'ha assignat a mojs.Shape nou . Si esteu totalment nou en la codificació, presteu atenció a l’ordre de claudàtors aquí i no us oblideu del punt i coma al final.

Fins ara no hem passat cap paràmetre excepte isShowStart: cert , és a dir, apareixerà a la pantalla fins i tot abans que no li haguem assignat cap moviment. Veureu que ha col·locat un cercle rosa al centre de la pantalla:

Aquest cercle és el predeterminat Forma per a mo.js. Podem canviar aquesta forma fàcilment afegint una línia al nostre codi:

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

Per afegir més propietats a un objecte, fem servir una coma per separar-lo. Aquí, hem afegit un forma propietat, i la va definir com a 'recta' . Deseu el bolígraf i veureu que la forma predeterminada canvia a un quadrat.

Aquest procés de transmissió de valors al fitxer Forma l'objecte és com els personalitzem. Ara mateix tenim un quadrat que en realitat no fa molt. Intentem animar alguna cosa.

Fonaments bàsics del moviment

Per aconseguir alguna cosa que sembli una mica més impressionant, configurem un cercle, amb un traç vermell al voltant i sense farciment a l'interior.

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

Com podeu veure, també hem assignat un fitxer amplada valor del traç i a radi per al cercle. Les coses ja comencen a semblar una mica diferents. Si la vostra forma no s’actualitza, assegureu-vos que no heu perdut cap coma ni cometes simples 'Xarxa' o bé 'cap' i assegureu-vos que heu fet clic guardar a la part superior de la pàgina.

Afegim una animació a això. A l'exemple anterior, aquest cercle vermell apareix on fa clic l'usuari abans de desaparèixer cap a fora. Una manera de fer-ho possible és canviant el radi i l’opacitat al llarg del temps. Modifiquem el codi:

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

Canviant el fitxer radi propietat i afegint opacitat i durada propietats, hem donat les instruccions de forma a dur a terme al llarg del temps. Aquests són Delta objectes, mantenint la informació inicial i final d’aquestes propietats.

Notareu que encara no passa res. Això es deu al fet que no hem afegit el fitxer .jugar() funció per dir-li que compleixi les nostres instruccions. Afegiu-lo entre els claudàtors finals i el punt i coma i hauríeu de veure com el vostre cercle cobra vida.

Ara arribem a algun lloc, però per fer-ho realment especial, vegem algunes possibilitats més en profunditat.

Comanda i facilitat amb Mo.js

Ara mateix, tan bon punt apareix el cercle, comença a esvair-se. Això funcionarà perfectament, però estaria bé tenir una mica més de control.

Ho podem fer amb el .then () funció. En lloc de canviar el nostre radi o opacitat, fem que la nostra forma es mantingui on comença, abans de canviar després d’un temps determinat.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

Ara, la nostra forma apareixerà amb els valors que li hem assignat, espereu 1000 ms abans de dur a terme qualsevol cosa que posem al fitxer .then () funció. Afegim algunes instruccions entre claudàtors:

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

Aquest codi introdueix una altra part important de l'animació. On hem instruït el escala per canviar d'1 a 2, també hem assignat una relaxació basada en ona sinusoïdal amb sin.in . Mo.js té incorporades diverses corbes d’alleugeriment, amb la possibilitat per als usuaris avançats d’afegir les seves. En aquest cas, l’escala al llarg del temps passa segons una ona sinusoïdal que es corba cap amunt.

Feu una ullada a la visualització de diferents corbes easings.net . Combineu això amb el ample de traç canviant a 0 per sobre de la nostra durada establerta i tindreu un efecte de desaparició molt més dinàmic.

Les formes són la base de tot a Mo.js, però només són l’inici de la història. Vegem-ho Esclats .

Explosió de potencial a Mo.js

A Explosió a Mo.js és una col·lecció de formes que emanen d’un punt central. Farem que aquestes siguin la base de la nostra animació acabada. Podeu trucar a una ràfega predeterminada de la mateixa manera que feu una forma. Fem algunes espurnes:

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

Podeu veure només afegint un buit Explosió objecte i dient-li que es reprodueixi, obtenim l’efecte de ràfega per defecte. Podem afectar la mida i la rotació de la ràfega animant-ne radi i angle propietats:

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

Ja hem afegit un radi i un gir personalitzats a la ràfega:

Perquè semblin més espurnes, canviem les formes que fa servir la ràfega i quantes formes genera la ràfega. Ho feu dirigint-vos a les propietats dels fills de l'explosió.

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();

Notareu que les propietats secundàries són les mateixes que les propietats de forma amb les quals ja hem treballat. Aquesta vegada hem escollit una creu com a forma. Totes aquestes 50 formes tenen ara les mateixes propietats. Comença a quedar força bé! Això és el primer que veurà l'usuari quan faci clic amb el ratolí.

Però ja podem veure que el traç vermell de la nostra inicial redCirc la forma es manté massa temps. Proveu de canviar-ne la durada perquè les dues animacions encaixin. Hauria d'acabar semblant a això:

Estem lluny d’acabar amb la nostra animació, però prenem un moment per fer-la reactiva per a l’usuari.

L’esdeveniment principal

Utilitzarem un gestor d’esdeveniments per activar les nostres animacions en la posició en què faci clic l’usuari. Al final del bloc de codi, afegiu-ho:

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

Aquest fragment de codi escolta els clics del ratolí i compleix les instruccions que hi ha entre parèntesis. Podem afegir el nostre redCirc i espurnes objectes a aquest oient.

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

Les dues funcions que anomenem aquí són .tune () i .replay () . La funció de reproducció és similar a la funció de reproducció, tot i que especifica que l’animació hauria de començar de nou des del principi cada vegada que es faci clic.

El sintonitzar La funció transmet valors al nostre objecte perquè pugueu canviar les coses quan s’activi. En aquest cas, passem les coordenades de la pàgina on s’ha fet clic amb el ratolí i assignem les posicions x i y de la nostra animació en conseqüència. Deseu el vostre codi i proveu de fer clic a la pantalla. Notareu un parell de problemes.

En primer lloc, la nostra animació inicial encara apareix al centre de la pantalla, fins i tot si l’usuari no fa clic a res. En segon lloc, l'animació no s'activa en el punt del ratolí, sinó que es desplaça cap avall i cap a la dreta. Podem solucionar aquestes dues coses fàcilment.

La nostra forma i esclat tenen .jugar() al final dels seus blocs de codi respectius. Ja no ho necessitem, ja que .replay () s'està cridant al gestor d'esdeveniments. Podeu eliminar .play () dels dos blocs de codi. Per la mateixa raó, podeu eliminar-la isShowStart: cert també, ja que ja no el necessitem per mostrar-lo a l’inici.

Per solucionar el problema de posicionament haurem d’establir valors de posició per als nostres objectes. Com recordareu des de la nostra primera forma, mo.js els posa al centre de la pàgina per defecte. Quan es combinen aquests valors amb la posició del ratolí, es crea el desplaçament. Per eliminar aquest desplaçament, només cal afegir aquestes línies a tots dos redCirc i espurnes objectes:

left: 0,
top: 0,

Ara els únics valors de posició que prenen els nostres objectes són els valors de posició del ratolí que ha passat l’oient d’esdeveniments. Ara les coses haurien de funcionar molt millor.

Aquest procés d'afegir objectes al controlador d'esdeveniments és com activarem totes les nostres animacions recordeu d'afegir-hi tots els objectes nous a partir d'ara. Ara que tenim els fonaments bàsics sobre com els volem, afegim algunes ràfegues més grans i brillants.

Aconseguir psicodèlic

Comencem amb alguns triangles que giren. La idea aquí era crear un efecte estroboscòpic hipnòtic, i configurar-lo és realment bastant fàcil. Afegiu una altra ràfega amb aquests paràmetres:

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
}
});

Tot aquí hauria de ser bastant familiar, ja que hi ha un parell de punts nous. Notareu que en lloc de definir la forma com un triangle, l’hem anomenat a polígon abans d'assignar el nombre de punts en té 3.

També hem donat omplir Funciona una matriu de colors amb els quals treballar, cada cinquè triangle tornarà al vermell i el patró continuarà. L'alt valor del fitxer angle la configuració fa que la ràfega giri prou ràpid com per produir el seu efecte estroboscòpic.

Si el codi no us funciona, assegureu-vos que heu afegit l'objecte triangles a la classe d'oient d'esdeveniments tal com hem fet amb els objectes anteriors.

Bastant psicodèlic! Afegim una altra ràfega per seguir-la.

Pentàgons ballants

Podem utilitzar una cosa gairebé idèntica a la nostra triangles objecte de fer la ràfega que la segueix. Aquest codi lleugerament modificat produeix hexàgons giratoris superposats de colors vius:

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
}
});

El principal canvi aquí és que hem afegit un retard de 500 ms, de manera que la ràfega no comenci fins després dels triangles. Canviant uns quants valors, la idea aquí era fer girar la ràfega en la direcció oposada als triangles. Per feliç accident, quan apareixen els pentàgons, l’efecte estroboscòpic dels triangles fa que sembli que giren junts.

Una mica d’atzar

Afegim un efecte que fa ús de valors aleatoris. Creeu una ràfega amb aquestes propietats:

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)',
}
});

Aquesta ràfega crearà línies que comencaran en vermell i es desvaniran fins a la transparència, reduint-se amb el pas del temps. El que fa interessant aquest component és que s’utilitzen valors aleatoris per determinar algunes de les seves propietats.

El degreeShift dóna a l’objecte infantil un angle de partida. En aleatoritzar això, proporciona una ràfega totalment diferent a cada clic. També s'utilitzen valors aleatoris per a radi i retard funcions per afegir a l'efecte caòtic.

Aquí teniu l’efecte per si mateix:

Com que aquí fem servir valors aleatoris, hem d'afegir un mètode addicional al nostre gestor d'esdeveniments per a l'objecte:

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

El generate () La funció calcula nous valors aleatoris cada vegada que es crida a l'esdeveniment. Sense això, la forma escolliria valors aleatoris la primera vegada que es cridaria i continuaria utilitzant aquests valors per a cada trucada posterior. Això arruïnaria totalment l’efecte, així que assegureu-vos d’afegir-lo.

Podeu utilitzar valors aleatoris per a gairebé tots els elements dels objectes mo.js i són una manera senzilla de crear animacions úniques.

com aturar les trucades telefòniques no desitjades en un telèfon fix

L'atzar no és l'única manera d'afegir moviments dinàmics a les animacions. Vegem el escalonar funció.

Línies escalonades

Per mostrar com escalonar la funció funciona, farem una cosa semblant a una Catherine Wheel. Creeu una ràfega nova amb aquests paràmetres:

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
}
});

A hores d’ara, tot aquí és familiar, una ràfega crea 50 nens amb línies vermelles o taronja. La diferència aquí és que passem el retard propietat a escalonament (10) funció. Això afegeix 10 ms de retard entre l’emissió de tots els nens i li dóna l’efecte de filatura que busquem.

La funció escalonament no fa servir cap valor aleatori, de manera que no necessiteu cap generar aquesta vegada al controlador d'esdeveniments. Vegem tot el que tenim fins ara en acció:

Podríem aturar-nos fàcilment aquí, però afegim una ràfega més per acabar aquest projecte.

Quadres intel·ligents

Per a aquesta última explosió, fem alguna cosa amb rectangles. Afegiu aquest objecte al vostre codi i al vostre oient d'esdeveniments:

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
}
});

Aquest objecte no afegeix res de nou al que ja hem treballat avui, sinó que només s’inclou per mostrar com es poden crear patrons geomètrics complexos fàcilment mitjançant el codi.

Aquest no va ser el resultat previst d'aquest objecte quan es va crear en les etapes de prova d'escriure aquest tutorial. Un cop publicat el codi, va quedar clar que m'havia topat amb alguna cosa molt més bella del que hauria pogut fer expressament.

Amb aquest objecte final afegit, ja hem acabat. Vegem tot en acció.

Mo.js: una potent eina per a animacions web

Aquesta senzilla introducció a mo.js cobreix les eines bàsiques necessàries per crear animacions boniques. La manera com s’utilitzen aquestes eines pot crear gairebé qualsevol cosa i, per a moltes tasques, les biblioteques web són una alternativa senzilla a l’ús Photoshop , After Effects o un altre programari costós.

Aquesta biblioteca és útil per a aquells que treballen tant en programació com en desenvolupament web, ja que el tractament d'esdeveniments utilitzat en el projecte es podria utilitzar fàcilment per crear botons i text reactius en llocs web o en aplicacions. Diverteix-te amb ell: no hi ha errors, només accidents feliços.

Compartir Compartir Tweet Correu electrònic Val la pena actualitzar-lo a Windows 11?

Windows s’ha redissenyat. Però, n’hi ha prou per convèncer-vos de canviar de Windows 10 a Windows 11?

Llegiu a continuació Temes relacionats

• Programació
• JavaScript

Sobre l'autor Ian Buckley(216 articles publicats)

Ian Buckley és periodista, músic, intèrpret i productor de vídeo independent que viu a Berlín, Alemanya. Quan no escriu ni està a l’escenari, juga amb electrònica o codi de bricolatge amb l’esperança de convertir-se en un científic boig.

Més de Ian Buckley

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us