Home-theater-designers
Si estas buscando inicia tu propio sitio web , hermosas animaciones pueden hacer que brille. Hay varias formas de lograr esto, desde simplemente haciendo un GIF animado desde una película existente, hasta aprender a hacer la suya propia desde cero con software como Licuadora o Maya .
También hay bibliotecas disponibles para crear animaciones mediante programación. Históricamente, los codificadores web usaban 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 bajo el nuevo marco, junto con las bibliotecas JavaScript diseñadas específicamente para la animación vectorial en el navegador.
Hoy veremos mo.js, uno de los niños más nuevos en el bloque para crear hermosas imágenes a partir del código. Cubriremos algunas funciones básicas, antes de crear una serie de animación reactiva para el usuario que crea hermosos patrones.
Ingrese 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 son demasiado conocedores del código, al mismo tiempo que permite a los programadores veteranos descubrir un lado artístico que nunca supieron que tenían. Como su nombre indica, se basa en el popular lenguaje de programación JavaScript, aunque está implementado de tal manera que cualquiera puede aprender los conceptos básicos fácilmente.
Antes de continuar, echemos un vistazo a lo que vamos a crear hoy:
Estaremos usando 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 en lugar de. Si desea omitir el tutorial paso a paso, el código completo está disponible aquí.
Configure un nuevo lápiz y será recibido con esta pantalla:
Antes de comenzar, deberá realizar un par de cambios. Clickea en el Ajustes en la esquina superior derecha y navegue hasta el JavaScript pestaña.
Vamos a estar usando Babel como nuestro preprocesador de código, así que selecciónelo en el menú desplegable. Babel hace que JavaScript sea un poco más fácil de entender, además de proporcionar ECMAScript 6 soporte para navegadores más antiguos. Si no sabes lo que eso significa, no te preocupes , nos hará la vida un poco más fácil aquí.
También necesitamos importar la biblioteca mo.js al proyecto. Haz esto buscando mo.js en el Agregar guiones / bolígrafos externos mensaje de texto y seleccionándolo.
Con estas dos cosas en su lugar, haga clic en Guardar y cerrar . ¡Estamos listos para empezar!
Formas básicas con Mo.js
Antes de comenzar con los gráficos, hagamos algo con ese fondo blanco cegador en el panel de visualización. Cambie la propiedad de color de fondo escribiendo este código en el CSS pan de molde.
|_+_|Crear una forma es un proceso simple y el concepto detrás de ella impulsa toda la biblioteca. Configuremos una forma de círculo predeterminada. Ingrese este código en el JS pan de molde:
|_+_|Aquí, hemos creado un constante valor con el nombre redCirc y lo asignó a un nuevos mojs. . Si es totalmente nuevo en la codificación, preste atención al orden de los corchetes aquí, ¡y no olvide el punto y coma al final!
Hasta ahora no hemos pasado ningún parámetro excepto isShowStart: verdadero , lo que significa que aparecerá en la pantalla incluso antes de que le hayamos asignado ningú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:
|_+_|Para agregar más propiedades a un objeto, usamos una coma para separarlo. Aquí, hemos agregado un forma propiedad, y lo definió como un 'rect' . Guarde su bolígrafo y verá que la forma predeterminada cambia a un cuadrado.
Este proceso de transmitir valores a la Forma El objeto es cómo los personalizamos. Ahora mismo tenemos un cuadrado que realmente no hace mucho. Intentemos animar algo.
Conceptos básicos del movimiento
Para obtener algo que se vea un poco más impresionante, establezcamos un círculo, con un trazo rojo alrededor y sin relleno en el interior.
|_+_|Como puede ver, también hemos asignado un ancho valor al trazo, y un radio para el círculo. Las cosas ya están empezando a verse un poco diferentes. Si su forma no se actualiza, asegúrese de que no se haya perdido ninguna coma o comillas simples alrededor 'red' o 'ninguno' y asegúrese de haber hecho clic ahorrar en la parte superior de la página.
Agreguemos una animación a esto. En el ejemplo anterior, este círculo rojo aparece donde el usuario hace clic, antes de desvanecerse hacia afuera. Una forma de hacer que esto suceda es cambiando el radio y la opacidad con el tiempo. Modifiquemos el código:
|_+_|Cambiando el radio propiedad, y agregando opacidad y duración propiedades, hemos dado las instrucciones de forma para llevarlas a cabo a lo largo del tiempo. Estos son Delta objetos, que contienen información de inicio y finalización para estas propiedades.
Notarás que todavía no pasa nada. Esto se debe a que no hemos agregado el .juego() función para indicarle que lleve a cabo nuestras instrucciones. Agréguelo entre los corchetes finales y el punto y coma, y verá que su círculo cobra vida.
Ahora estamos llegando a algún lado, pero para hacerlo realmente especial, veamos algunas posibilidades más en profundidad.
Ordenar y simplificar 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 .luego() función. En lugar de cambiar nuestro radio u opacidad, hagamos que nuestra forma permanezca donde comienza, antes de cambiar después de un período de tiempo determinado.
|_+_|Ahora, aparecerá nuestra forma con los valores que le hemos asignado, espere 1000 ms, antes de realizar cualquier cosa que pongamos en el .luego() función. Agreguemos algunas instrucciones entre corchetes:
|_+_|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 una relajación basada en onda sinusoidal con sin.in . Mo.js tiene una variedad de curvas de aceleración integradas, con la capacidad de que los usuarios avanzados agreguen las suyas propias. En este caso, la escala en el tiempo ocurre de acuerdo con una onda sinusoidal que se curva hacia arriba.
Para obtener un resumen visual de las diferentes curvas, consulte easings.net . Combine 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 .
Rebosante de potencial en Mo.js
A Estallar en Mo.js hay una colección de formas que emanan de un punto central. Vamos a hacer de estos la base de nuestra animación final. Puede llamar a una ráfaga predeterminada de la misma manera que lo hace con una forma. Hagamos algunas chispas:
|_+_|Puede ver, simplemente agregando un vacío Estallar objeto y diciéndole que se reproduzca, 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:
|_+_|Ya hemos agregado un radio y un giro personalizados a nuestra ráfaga:
Para que se parezcan más a chispas, cambiemos las formas que usa la ráfaga y cuántas formas genera la ráfaga. Lo hace abordando las propiedades de los hijos de la explosión.
|_+_|Notará que las propiedades secundarias son las mismas que las propiedades de la forma con las que ya hemos trabajado. Esta vez hemos elegido una cruz como forma. 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 permanece demasiado tiempo. Intente cambiar su duración para que ambas animaciones encajen. Debería terminar luciendo algo como esto:
Estamos lejos de haber terminado con nuestra animación, pero tomemos un momento para hacerla reactiva para el usuario.
El evento principal
Usaremos 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:
|_+_|Este fragmento de código escucha los clics del mouse y ejecuta las instrucciones que están entre paréntesis para nosotros. Podemos agregar nuestro redCirc y chispas objetos a este oyente.
|_+_|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 en ella.
los melodía La función pasa valores a nuestro objeto para que pueda cambiar cosas cuando se activa. En este caso, estamos pasando las coordenadas de la página donde se hizo clic con el mouse y asignando la posición xey 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 todavía aparece en el medio 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 el .juego() al final de sus respectivos bloques de código. Ya no necesitamos esto como .repetición() se llama en el controlador de eventos. Puede eliminar .play () de ambos bloques de código. Por la misma razón, puede eliminar isShowStart: verdadero también, ya que ya no necesitamos que se muestre 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 mouse, crea el desplazamiento. Para deshacerse de este desplazamiento, simplemente agregue estas líneas a ambos redCirc y chispas objetos:
|_+_|Ahora, los únicos valores de posición que toman nuestros objetos son los valores de posición del mouse pasados por 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 activaremos todas nuestras animaciones, por lo que ¡recuerde agregarle todos los objetos nuevos a partir de ahora! Ahora que tenemos los conceptos básicos funcionando como queremos, agreguemos algunas ráfagas más grandes y brillantes.
Ponerse psicodélico
Comencemos con algunos triángulos giratorios. La idea aquí era crear un efecto estroboscópico hipnótico, y configurarlo es bastante fácil. Agregue otra ráfaga con estos parámetros:
|_+_|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 un polígono antes de asignar el número de puntos tiene como 3.
También hemos dado llenar funciona con una matriz de colores para trabajar, cada quinto triángulo volverá a rojo y el patrón continuará. El alto valor de la ángulo El ajuste hace que la ráfaga gire lo suficientemente rápido como para producir su efecto estroboscópico.
Si el código no funciona para usted, asegúrese de haber agregado el objeto triángulos a la clase de escucha de eventos como hicimos con los objetos anteriores.
¡Bastante psicodélico! Agreguemos otra ráfaga para seguirlo.
Pentágonos Danzantes
Podemos usar algo casi idéntico a nuestro triangulos objeto para hacer el estallido que le sigue. Este código ligeramente modificado produce hexágonos giratorios superpuestos de colores brillantes:
|_+_|El principal cambio aquí es que hemos agregado un demora 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 feliz accidente, cuando aparecen los pentágonos, el efecto estroboscópico de los triángulos hace que parezca que están girando juntos.
Un poco de aleatoriedad
Agreguemos un efecto que hace uso de valores aleatorios. Crea una ráfaga con estas propiedades:
|_+_|Esta ráfaga creará líneas que comienzan en rojo y se desvanecen hasta convertirse en transparentes, encogié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 degreeShift le da al objeto hijo un ángulo inicial. Al aleatorizar esto, da una ráfaga totalmente diferente en cada clic. Los valores aleatorios también se utilizan para radio y demora funciones para agregar al efecto caótico.
Aquí está el efecto en sí mismo:
Dado que estamos usando valores aleatorios aquí, necesitamos agregar un método adicional a nuestro controlador de eventos para el objeto:
|_+_|los generar() La función calcula nuevos valores aleatorios cada vez que se llama al evento. Sin esto, la forma elegiría valores aleatorios la primera vez que se llama y continuaría usando esos valores para cada llamada posterior. Esto arruinaría totalmente el efecto, ¡así que asegúrate de agregar esto!
Puede utilizar valores aleatorios para casi todos los elementos de los objetos mo.js, y son una forma sencilla de crear animaciones únicas.
¿Qué es demasiado caliente para una CPU?
Sin embargo, la aleatoriedad no es la única forma de agregar movimientos dinámicos a las animaciones. Echemos un vistazo al tambalear función.
Líneas asombrosas
Para mostrar como el tambalear La función funciona, vamos a hacer algo un poco como Catherine Wheel. Cree una nueva ráfaga con estos parámetros:
|_+_|Todo aquí es familiar ahora, un estallido crea 50 niños que son líneas rojas o naranjas. La diferencia aquí es que pasamos el demora propiedad a escalonamiento (10) función. Esto agrega 10ms de retraso entre la emisión de cada niño, dándole el efecto de giro que buscamos.
La función de escalonamiento no utiliza ningún valor aleatorio, por lo que no necesitará un generar función en el controlador de eventos esta vez. Veamos todo lo que tenemos hasta ahora en acción:
Podríamos detenernos fácilmente aquí, pero 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:
|_+_|Este objeto no agrega nada nuevo a lo que ya hemos trabajado hoy, se incluye simplemente para mostrar cómo los patrones geométricos complejos se pueden crear fácilmente a través del código.
Este no era el resultado esperado de este objeto cuando se creó en las etapas de prueba de la redacción de este tutorial. Una vez que se ejecutó el código, quedó claro que me había topado 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 en acción.
Mo.js: una herramienta poderosa para animaciones web
Esta sencilla 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 Photoshop , After Effects u otro software costoso.
Esta biblioteca es útil para quienes trabajan tanto en programación como en desarrollo web, el manejo de eventos utilizado en el proyecto podría usarse fácilmente para crear botones reactivos y texto en sitios web o aplicaciones. Diviértete con él: no hay errores, ¡solo accidentes felices!
Cuota Cuota Pío Correo electrónico ¿Vale la pena actualizar a Windows 11?Windows ha sido rediseñado. Pero, ¿es eso suficiente para convencerte de cambiar de Windows 10 a Windows 11?
Leer siguiente Temas relacionados- Programación
- JavaScript
Ian Buckley es un periodista, músico, intérprete y productor de video independiente que vive en Berlín, Alemania. Cuando no está escribiendo o en el escenario, está jugando con la electrónica o el código de bricolaje con la esperanza de convertirse en un científico loco.
Más de Ian BuckleySuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse