Cómo hacer hermosas animaciones web codificadas con Mo.JS

Si está buscando comenzar su propio sitio web, las animaciones de aspecto hermoso pueden hacerlo brillar. Hay varias formas de lograr esto, desde simplemente hacer un GIF animado a partir de una película existente, hasta aprender a hacer tu propio juego desde cero con software como Blender o Maya..

También hay librerías disponibles para crear animaciones programáticamente. Históricamente, los codificadores web utilizaron jQuery para crear animaciones simples, pero a medida que la web se desarrolló y HTML5 se convirtió en el nuevo estándar, aparecieron nuevas opciones. Las bibliotecas CSS para animación se volvieron increíblemente poderosas en el nuevo marco, junto con las bibliotecas de JavaScript diseñadas específicamente para la animación vectorial en el navegador.

Hoy veremos a mo.js, uno de los niños más nuevos en el bloque para crear imágenes hermosas a partir del código. Cubriremos algunas funciones básicas, antes de crear una serie de animación reactiva para el usuario que cree patrones hermosos.

Entra Mo.js

Mo.js es una biblioteca para crear gráficos en movimiento para la web con facilidad. Está diseñado para hacer que la creación de cosas hermosas sea simple para aquellos que no tienen demasiados conocimientos de códigos, al tiempo que permite a los programadores veteranos descubrir un lado artístico que nunca sabían que tenían. Como su nombre lo indica, se basa en el popular lenguaje de programación JavaScript, aunque está implementado de tal manera que cualquiera puede aprender lo básico fácilmente..

Antes de continuar, echemos un vistazo a lo que vamos a crear hoy:

Usaremos CodePen para el proyecto de hoy, ya que nos permite trabajar en todo en la misma ventana del navegador. Si lo prefiere, puede trabajar en un editor de su elección. Si desea omitir el tutorial paso a paso, el código completo está disponible aquí.

Configura una nueva pluma, y ​​serás recibido con esta pantalla:

Antes de comenzar, tendrá que hacer un par de cambios. Haga clic en el Ajustes en la parte superior derecha y navegue hasta JavaScript lengüeta.

Vamos a estar usando Babel como nuestro preprocesador de código, así que seleccione esto desde el menú desplegable. Babel hace que JavaScript sea un poco más fácil de entender, además de proporcionar ECMAScript 6 ¿Qué es ES6 y lo que los programadores de Javascript necesitan saber? ¿Qué es ES6 y lo que los programadores de Javascript deben saber? Veamos ahora algunos cambios importantes que ES6 trae a JavaScript. Leer más soporte para navegadores antiguos. Si no sabes lo que eso significa., no te preocupes, Solo va a hacer nuestras vidas un poco más fáciles aquí..

También necesitamos importar la biblioteca mo.js en el proyecto. Haz esto buscando mo.js en el Añadir scripts externos / bolígrafos mensaje de texto, y seleccionándolo.

Con estas dos cosas en su lugar, haga clic Guardar y cerrar. Estamos listos para empezar!

Formas Básicas Con Mo.js

Antes de comenzar con los gráficos, hagamos algo sobre ese fondo blanco cegador en el panel de visualización. Cambie la propiedad de color de fondo escribiendo este código en la CSS cristal.

cuerpo fondo: rgba (11,11,11,1); 

Crear una forma es un proceso simple, y el concepto subyacente impulsa toda la biblioteca. Vamos a configurar una forma de círculo por defecto. Ingrese este código en el JS cristal:

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

Aquí, hemos creado un const valor con el nombre redCirc y lo asignó a un nuevos mojs.Shape. Si eres totalmente nuevo en la codificación, presta atención al orden de corchete aquí, y no olvides el punto y coma al final!

Hasta ahora hemos pasado en ningún parámetro excepto isShowStart: true, lo que significa que aparecerá en la pantalla incluso antes de que le hayamos asignado algún movimiento. Verás que ha colocado un círculo rosa en el centro de la pantalla:

Este círculo es el predeterminado Forma para mo.js. Podemos cambiar esta forma fácilmente agregando una línea a nuestro código:

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

Para agregar más propiedades a un objeto, usamos una coma para separarlo. Aquí, hemos añadido un forma propiedad, y lo definió como una 'rect'. Guarda tu pluma y verás los cambios de forma predeterminados en un cuadrado..

Este proceso de pasar valores a la Forma El objeto es cómo los personalizamos. En este momento tenemos un cuadrado que realmente no hace mucho. Intentemos animar algo.

Fundamentos del movimiento

Para obtener algo que se vea un poco más impresionante, formemos un círculo, con un trazo rojo alrededor y sin relleno dentro.

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

Como puede ver, también hemos asignado una anchura valor al trazo, y un radio para el circulo Las cosas ya están empezando a verse un poco diferentes. Si su forma no se está actualizando, asegúrese de no haber omitido ninguna coma ni comillas simples alrededor 'rojo' o 'ninguna', y asegúrate de que has hecho clic salvar en la parte superior de la página.

Vamos a añadir una animación a esto. En el ejemplo anterior, este círculo rojo aparece donde el usuario hace clic, antes de desaparecer. Una forma en que podríamos hacer que esto suceda es cambiando el radio y la opacidad a lo largo del tiempo. Modifiquemos el código:

 radio: 15:30, opacidad: 1: 0, duración: 1000

Cambiando el radio propiedad, y añadiendo opacidad y duración propiedades, hemos dado las instrucciones de forma para llevar a cabo en el tiempo. Estos son Delta Objetos, manteniendo información de inicio y fin de estas propiedades..

Notarás que nada está sucediendo todavía. Esto es porque no hemos añadido el .jugar() Funciona para decirle que cumpla nuestras instrucciones. Agrégalo entre los corchetes y el punto y coma, y ​​deberías ver cómo tu círculo cobra vida..

Ahora estamos llegando a algún lugar, pero para hacerlo realmente especial, veamos algunas posibilidades más en profundidad..

Ordenar y Facilitar Con Mo.js

En este momento, tan pronto como aparece el círculo, comienza a desvanecerse. Esto funcionará perfectamente bien, pero sería bueno tener un poco más de control.

Podemos hacer esto con el .entonces() función. En lugar de cambiar nuestro radio u opacidad, hagamos que nuestra forma permanezca donde comienza, antes de cambiarla después de un tiempo establecido.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', radio: 15, duration: 1000). Luego (// haz más cosas aquí) .jugar();

Ahora, nuestra forma aparecerá con los valores que le hemos asignado, espere 1000 ms, antes de realizar cualquier cosa que pongamos en el .entonces() función. Agreguemos algunas instrucciones entre paréntesis:

 // haz más cosas aquí strokeWidth: 0, scale: 1: 2, easing: 'sin.in', duration: 500

Este código introduce otra parte importante de la animación. Donde hemos instruido al escala para cambiar de 1 a 2, también hemos asignado alivio basado en onda sinusoidal con pecado.in. Mo.js tiene una variedad de curvas de aceleración integradas, con la capacidad de los usuarios avanzados de agregar las suyas propias. En este caso, la escala en el tiempo ocurre de acuerdo con una onda sinusoidal que se curva hacia arriba.

Para un recorrido visual de diferentes curvas, echa un vistazo a easings.net. Combina esto con el anchura del trazo cambiando a 0 durante nuestra duración establecida, y tiene un efecto de desaparición mucho más dinámico.

Las formas son la base de todo en Mo.js, pero son solo el comienzo de la historia. Miremos a Ráfagas.

Estallando con potencial en Mo.js

UNA Ráfaga en Mo.js es una colección de formas que emanan de un punto central. Vamos a hacer que estos sean la base de nuestra animación terminada. Puede llamar a una ráfaga predeterminada de la misma manera que hace una forma. Vamos a hacer algunas chispas:

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

Se puede ver, simplemente añadiendo un vacío. Ráfaga Objeto y diciéndole que juegue, obtenemos el efecto de ráfaga predeterminado. Podemos afectar el tamaño y la rotación de la ráfaga animando su radio y ángulo propiedades:

const sparks = new mojs.Burst (radio: 0:30, suavizado: 'cubic.out', ángulo: 0: 90, suavizado: 'quad.out',). play ();

Ya hemos agregado un radio y giro personalizados a nuestra explosión:

Para hacer que se vean más como chispas, cambiemos las formas que usa la ráfaga y cuántas formas genera la ráfaga. Lo haces abordando las propiedades de los hijos de la explosión..

const sparks = new mojs.Burst (radius: 0:30, easing: 'cubic.out', angle: 0: 90, easing: 'quad.out', count: 50, children: shape: 'cruz', trazo: 'blanco', puntos: 12, radio: 10, relleno: 'ninguno', ángulo: 0: 360, duración: 300). play ();

Notará que las propiedades secundarias son las mismas que las propiedades de forma con las que ya hemos trabajado. Esta vez hemos elegido una cruz como forma. Todas las 50 de estas formas ahora tienen las mismas propiedades. ¡Está empezando a verse bastante bien! Esto es lo primero que verá el usuario cuando haga clic con el mouse.

Aunque ya podemos ver que el trazo rojo de nuestra inicial redCirc La forma se mantiene alrededor demasiado tiempo. Intenta cambiar su duración para que ambas animaciones encajen entre sí. Debería acabar buscando algo como esto:

Estamos lejos de terminar con nuestra animación, pero tomemos un momento para que sea reactiva para el usuario.

El evento principal

Utilizaremos un controlador de eventos para activar nuestras animaciones en la posición en la que el usuario hace clic. Al final de su bloque de código, agregue esto:

document.addEventListener ('clic', función (e) );

Este fragmento de código escucha los clics del mouse y lleva a cabo todas las instrucciones que se encuentran entre paréntesis para nosotros. Podemos añadir nuestro redCirc y moscas objetos a este oyente.

document.addEventListener ('clic', función (e) redCirc .tune (x: e.pageX, y: e.pageY,) .replay (); sparks .tune (x: e.pageX, y: e.pageY) .replay (););

Las dos funciones que llamamos aquí son .melodía() y .repetición(). La función de reproducción es similar a la función de reproducción, aunque especifica que la animación debe comenzar de nuevo desde el principio cada vez que se hace clic..

los melodía La función pasa los valores a nuestro objeto para que pueda cambiar las cosas cuando se activa. En este caso, estamos pasando las coordenadas de la página donde se hizo clic con el mouse y asignando las posiciones x e y de nuestra animación en consecuencia. Guarde su código e intente hacer clic en la pantalla. Notarás un par de problemas..

En primer lugar, nuestra animación inicial aún aparece en el centro de la pantalla, incluso si el usuario no hace clic en nada. En segundo lugar, la animación no se activa en el punto del mouse, sino que se desplaza hacia abajo y hacia la derecha. Podemos arreglar ambas cosas fácilmente.

Nuestra forma y estallido tienen la .jugar() Al final de sus respectivos bloques de código. Ya no necesitamos esto como .repetición() Se está llamando en el controlador de eventos. Puedes eliminar .play () de ambos bloques de código. Por la misma razón, puede eliminar isShowStart: true También, como ya no lo necesitamos para mostrar al principio.

Para solucionar el problema de posicionamiento, necesitaremos establecer valores de posición para nuestros objetos. Como recordará de nuestra primera forma, mo.js los coloca en el centro de la página de forma predeterminada. Cuando estos valores se combinan con la posición del ratón, crea el desplazamiento. Para deshacerse de este desplazamiento, simplemente agregue estas líneas a ambos redCirc y moscas objetos:

izquierda: 0, arriba: 0,

Ahora, los únicos valores de posición que adquieren nuestros objetos son los valores de posición del mouse que pasa el detector de eventos. Ahora las cosas deberían funcionar mucho mejor..

Este proceso de agregar objetos al controlador de eventos es la forma en que activamos todas nuestras animaciones, por lo que Recuerda agregar cada nuevo objeto a partir de ahora.! Ahora que tenemos los conceptos básicos trabajando como los queremos, agreguemos algunos estallidos más grandes y brillantes..

Consiguiendo psicodélico

Vamos a empezar con algunos triángulos giratorios. La idea aquí era crear un efecto estroboscópico hipnótico, y configurar esto en realidad es bastante fácil. Agrega otra ráfaga con estos parámetros:

triángulos const = nuevos mojs.Burst (radio: 0: 1000, suavizado: 'cubic.out', ángulo: 1080: 0, suavizado: 'quad.out', izquierda: 0, arriba: 0, cuenta : 20, hijos: forma: 'polígono', puntos: 3, radio: 10: 100, relleno: ['rojo', 'amarillo', 'azul', 'verde'], duración: 3000) ;

Todo aquí debería ser bastante familiar a estas alturas, aunque hay un par de puntos nuevos. Notarás que en lugar de definir la forma como un triángulo, la hemos llamado una polígono antes de asignar el número de puntos tiene como 3.

También hemos dado llenar Para trabajar con una variedad de colores, cada quinto triángulo volverá a ser rojo y el patrón continuará. El alto valor de la ángulo la configuración hace que la ráfaga gire lo suficientemente rápido para producir su efecto estroboscópico.

Si el código no funciona para usted, asegúrese de haber agregado el objeto de triángulos a la clase de escucha de eventos como hicimos con los objetos anteriores.

¡Bastante psicodélico! Añadamos otra ráfaga para seguirla..

Pentágonos de baile

Podemos usar algo casi idéntico a nuestro triangulos Objeto para hacer el estallido que lo sigue. Este código ligeramente modificado produce hexágonos giratorios superpuestos de colores brillantes:

pentágonos const = nuevos mojs.Burst (radio: 0: 1000, suavizado: 'cubic.out', ángulo: 0: 720, suavizado: 'quad.out', izquierda: 0, arriba: 0, contar : 20, hijos: forma: 'polígono', radio: 1: 300, puntos: 5, relleno: ['púrpura', 'rosa', 'amarillo', 'verde'], retraso: 500, duración: 3000));

El principal cambio aquí es que hemos añadido un retrasar de 500ms, para que la ráfaga no comience hasta después de los triángulos. Al cambiar algunos valores, la idea aquí era hacer que la ráfaga girara en la dirección opuesta a los triángulos. Por accidente, cuando aparecen los pentágonos, el efecto estroboscópico de los triángulos hace que parezca que giran juntos..

Un poco de aleatoriedad

Añadamos un efecto que haga uso de valores aleatorios. Crea una ráfaga con estas propiedades:

const redSparks = new mojs.Burst (left: 0, top: 0, count: 8, radio: 150: 350, angle: 0:90, easing: 'cubic.out', children: shape: 'line', stroke: 'red': 'transparent', strokeWidth: 5, scaleX: 0.5: 0, degree Shift: 'rand (-90, 90)', radio: 'rand (20, 300)' , duración: 500, retardo: 'rand (0, 150)',);

Esta ráfaga creará líneas que comienzan en rojo y se desvanecen en transparencia, reduciéndose con el tiempo. Lo que hace que este componente sea interesante es que se utilizan valores aleatorios para determinar algunas de sus propiedades..

los cambio de grado le da al objeto niño un ángulo de partida. Al aleatorizar esto, da una explosión totalmente diferente en cada clic. También se utilizan valores aleatorios para el radio y retrasar Funciones para añadir al efecto caótico..

Aquí está el efecto por sí mismo:

Ya que estamos usando valores aleatorios aquí, necesitamos agregar un método adicional a nuestro controlador de eventos para el objeto:

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

los generar() La función calcula valores aleatorios nuevos cada vez que se llama al evento. Sin esto, la forma elegiría valores aleatorios la primera vez que se llame, y continuará usando esos valores para cada llamada subsiguiente. Esto arruinaría totalmente el efecto, así que asegúrate de agregar esto.!

Puede usar valores aleatorios para casi todos los elementos de los objetos mo.js, y son una forma sencilla de crear animaciones únicas.

Sin embargo, la aleatoriedad no es la única forma de agregar movimientos dinámicos a las animaciones. Echemos un vistazo a la tambalear función.

Líneas asombrosas

Para mostrar cómo tambalear La función funciona, vamos a hacer algo un poco como una rueda de Catherine. Crea una nueva ráfaga con estos parámetros:

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', radio: 1: 100, easing: 'elastic.out', fill: 'none', stroke: ['red', 'orange'], delay: 'stagger (10) ', duración: 1000);

Todo aquí es familiar por ahora, una ráfaga crea 50 niños que son líneas rojas o naranjas. La diferencia aquí es que pasamos el retrasar propiedad a escalonar (10) función. Esto agrega 10 ms de retraso entre la emisión de cada niño, lo que le da el efecto de giro que estamos buscando.

La función de escalonamiento no hace uso de valores aleatorios, por lo que no necesitará un generar Funciona en el manejador de eventos esta vez. Veamos todo lo que tenemos hasta ahora en acción:

Podríamos detenernos fácilmente aquí, pero solo agreguemos una ráfaga más para redondear este proyecto.

Cuadrados inteligentes

Para esta última ráfaga, hagamos algo usando rectángulos. Agregue este objeto a su código y detector de eventos:

const redSquares = new mojs.Burst (radius: 0: 1000, easing: 'cubic.out', angle: 360: 0, easing: 'quad.out', left: 0, top: 0, count : 20, hijos: forma: 'rect', radioX: 1: 1000, radioY: 50, puntos: 5, relleno: 'ninguno', trazo: 'rojo': 'naranja', trazo ancho: 5 : 15, retraso: 1000, duración: 3000);

Este objeto no agrega nada nuevo a lo que ya hemos trabajado hoy, se incluye simplemente para mostrar cómo se pueden crear fácilmente patrones geométricos complejos a través del código.

Este no fue el resultado previsto de este objeto cuando se creó en las etapas de prueba al escribir este tutorial. Una vez que se ejecutó el código, quedó claro que había tropezado con algo mucho más hermoso de lo que podría haber hecho a propósito.!

Con este objeto final agregado, hemos terminado. Veamos todo el asunto en acción..

Mo.js: una herramienta poderosa para animaciones web

Esta simple introducción a mo.js cubre las herramientas básicas necesarias para crear hermosas animaciones. La forma en que se usan esas herramientas puede crear casi cualquier cosa, y para muchas tareas, las bibliotecas web son una alternativa simple al uso de Photoshop, After Effects u otro software costoso.

Esta biblioteca es útil para quienes trabajan tanto en programación como en desarrollo web Programación vs. Desarrollo web: ¿Cuál es la diferencia? Programación vs. Desarrollo Web: ¿Cuál es la diferencia? Podría pensar que los programadores de aplicaciones y los desarrolladores web hacen el mismo trabajo, pero eso está lejos de la verdad. Aquí están las principales diferencias entre los programadores y los desarrolladores web. Lea más, el manejo de eventos utilizado en el proyecto podría usarse fácilmente para crear botones y texto reactivos en sitios web o aplicaciones. Diviértete con él: no hay errores, solo accidentes felices.!

Explorar más sobre: ​​JavaScript.