Metamorfosis: SVG cambiantes

Foto de herrero por Jonathan Bean

Fondo

Este es un artículo de mostrar y contar sobre la transformación de formas SVG . Quiero compartir algunas de mis experiencias con el uso de la técnica. En el artículo mostraré algunas de mis demostraciones y diré algunas palabras sobre cada demostración. Todos ellos, de diferentes maneras, implican la transformación de la forma.

Entonces, ¿qué es la transformación? La palabra en sí proviene del griego antiguo. Según Wikipedia, se origina en algún lugar hace unos 500 años. La metamorfosis se refiere al acto de un animal u objeto que cambia su forma o forma. El cambio se produce a través de una o varias transiciones bien definidas. Wikipedia: Un cambio en la forma y, a menudo, en los hábitos de un animal durante el desarrollo normal después de la etapa embrionaria . Además de hablar de animales, se usa en contextos más abstractos. Por ejemplo, cuando se habla del carácter o la apariencia de una persona. Mirando la etimología, la palabra "metamórphōsis" (μεταμόρφωσις) proviene de dos palabras. Son “metá” (μετά, “después”) y “morphḗ” (μορφή, “forma”).

Morphing en las computadoras

El efecto morphing apareció a principios de los 90, donde llegó a tener un uso generalizado. Diferentes materiales de video se beneficiaron de ello. Las películas, los comerciales y los videos musicales son ejemplos en los que comenzó a aparecer la transformación. El ejemplo más notable es el video musical de Michael Jackson para la canción Black and White. Solo eso hizo que la transformación de la cara fuera popular. La historia detrás está bien contada en este artículo: Una historia oral que se transforma en Black or White de Michael Jackson.

Avance rápido a los últimos cinco años. Ahora hemos visto morphing abriéndose paso en web. El auge de la tendencia de la interfaz de usuario plana, el buen cumplimiento de SVG y los dispositivos más rápidos actuaron como habilitadores. Hoy, 2017, es posible utilizarlo de forma eficaz en todos los navegadores. No voy a entrar en detalles sobre cómo funciona la técnica. Este artículo de 2014 en CSS-tricks cubre los detalles: Cómo funciona la transformación de formas SVG . Además, vale la pena leer este artículo sobre trucos CSS. Enumera las diferentes herramientas de transformación que existen: Las muchas herramientas para la transformación de formas .

Más posibilidades

Me gusta la transformación de SVG. Mucho. Suficiente para escribir un artículo al respecto al menos. Agrega otra dimensión a la caja de herramientas de animación. Puede hacer mucho con las tres transformaciones de transición CSS más comunes. Estoy hablando de traducir , rotar y escalar. Sin embargo, ninguno de estos métodos altera la forma del objeto animado. La capacidad de cambiar la forma y la forma abre grandes posibilidades. Se vuelve especialmente interesante cuando se combina con otros métodos de animación. Como por ejemplo los tres mencionados anteriormente. Podría, por ejemplo, transformarse y cambiar el color del objeto. Utilice la transformación junto con la traducción. O por qué no hacer los tres juntos con diferentes tiempos. Mejor aún, crea algo nuevo. Combínalo con algo moderno, como mezclas de colores o degradados. Solo tu imaginación pone los límites.

Estampación

Yo uso anime-js para morphing. No es la mejor opción cuando se trata de morphing per se. Existen otras opciones más dirigidas a la transformación. Algunas de estas opciones hacen más del trabajo pesado por usted. Prefiero anime-js aunque necesito hacer más trabajo manual. Tiene una sintaxis muy compacta y me permite combinar el morphing con otro tipo de animaciones. Tener más de un tipo de animación es casi siempre el caso hoy en día. Por supuesto, las características frente al uso de muchas bibliotecas también son una compensación cuando se trata de seleccionar sus herramientas. En general, me gusta mantener bajo el número de dependencias.

Echemos un vistazo a las diferentes demostraciones:

Submenú expandir

Un caso de uso bastante útil para la transformación de SVG es, a lo que me refiero, inflar/desinflar objetos. Por inflar/desinflar me refiero a un método más sofisticado de aumentar/reducir objetos. Supongamos que tiene una forma compleja que desea reducir. ¿Cómo lo rebajas? Es posible que escalar el objeto no se vea bien, ya que algunas partes detalladas pueden volverse borrosas cuando se dibujan en menos píxeles. SVG Morphing es una opción para evitar este problema en particular. Permite que los objetos en su tamaño más pequeño adquieran una forma mucho más simple. Eso podría ser un círculo, un cuadrado o alguna otra forma primitiva. El bolígrafo de abajo usa esta técnica. El icono de menú (tres puntos) se convierte, cuando está activado, en una barra de herramientas móvil de segundo nivel. Cada punto se traduce a una nueva posición y se infla en un icono de menú de segundo nivel. Este concepto de inflar/desinflar es especialmente adecuado para dispositivos móviles. Como se demuestra a continuación, la transformación ayuda a superar las restricciones en el espacio.

Triángulos ciervo o conejo

Si uno puede transformar un triángulo, entonces uno podría transformar tres triángulos. Si uno puede transformar tres triángulos, entonces podría transformar 95 triángulos. Este es el tema de la próxima pluma.

El dibujo geométrico/poligonal de forma de arte me inspiró para crear esta demostración. Es minimalista. Las líneas rectas, de manera uniforme y estricta, conforman formas y formas. Hay muy pocos matices. Aún así, es fácil ver el objeto retratado en las obras de arte. Después de buscar inspiración, encontré unos animales dibujados con triángulos que me gustaron mucho. Estas obras de arte consistían en triángulos negros de tamaños similares dibujados sobre un fondo blanco. Casi en un instante, decidí crear una transición entre dos de las obras de arte. Después de encontrar un par de buenos candidatos me conformé con dos. Elijo un ciervo y un conejo por dos razones. Eran a) hermosos yb) tenían casi la misma cantidad de triángulos.

Uno de los aspectos más importantes de la creación de esta demostración es la logística que la rodea. A veces no es lo que creas sino cómo lo creas lo que más importa. Quería poder iterar. Cambiar, guardar, inspeccionar el resultado, cambiar, etc. Una y otra vez. Para hacerlo, configuré un entorno de aplicación web local con Yeoman. Jugueteo un poco con Gulp. Escribí un script para convertir archivos SVG en matrices de Javascript. Configuré las animaciones con anime-js. Todas estas cosas combinadas me dieron el ambiente de trabajo local deseado. Ahora podía guardar el archivo SVG en el editor de vectores (Inkscape) y obtener un resultado inmediato en el navegador. Funcionó de acuerdo con el siguiente esquema:

1. Gulp está escuchando cambios en los archivos de imagen ( **/*.svg ).
2. Cada vez que Gulp detecta un cambio (guardando el archivo SVG), llama a un script de NodeJS.
3. Este script analiza el archivo SVG y crea dos matrices con datos de curva Bezier. Uno con los valores para el venado y otro con los valores para el conejo.
4. BrowserSync detecta un cambio en el sistema de archivos y vuelve a cargar el navegador
5. Al volver a cargar el navegador, se reinician las animaciones utilizando las matrices recreadas.

Lo anterior me permitió construir la demostración en incrementos usando solo un editor de vectores. Pude desarrollar la demostración triángulo por triángulo de la manera más rápida posible. Considerar y mejorar su entorno de desarrollo local es algo que puedo recomendar. Por supuesto, no siempre es aplicable, pero en algunos casos proporciona grandes aumentos de velocidad.

Los puntos de referencia se transforman

La transformación de puntos de referencia muestra el caso de uso más común para la transformación de SVG. Es decir, morphing entre dos o más formas bien definidas. En este caso, puntos de referencia famosos**.** Un aspecto importante de la transformación de formas SVG es realizar un seguimiento del orden de los puntos/nodos. La transformación, más o menos, casi siempre se aplica al elemento SVG <ruta>. Para ser más específicos, se aplica a su descriptor (el atributo d). Este descriptor consta de muchos puntos. Ellos, en conjunto, conforman las diferentes partes geométricas del camino. Ejemplos de partes del elemento de ruta, por mencionar algunos, son líneas, curvas y arcos. Imita mucho el dibujo de la vida real en papel, donde uno dibuja una forma de un punto a otro. Para obtener el efecto de transformación deseado, dibujé todos los puntos de referencia exactamente de la misma manera. Empecé con la esquina inferior izquierda. Luego creé los nodos en sentido contrario a las agujas del reloj. Todas las formas tienen exactamente la misma cantidad de nodos (136 nodos). El orden aquí es importante. El primer nodo de la primera forma se moverá a la posición del primer nodo de la segunda forma. Si la orden está desactivada, el efecto no será fluido.

Tire para actualizar

En esta demostración, intento probar una de las microinteracciones más comunes. Tire para actualizar o PTR. Para obtener más información sobre las microinteracciones, consulte este artículo: Impulse su diseño mediante microinteracciones . Las microinteracciones son, en esencia, una secuencia de eventos junto con una sola tarea de usuario. Activarlo produce, en el caso común, una cadena de animaciones y comentarios visuales para el usuario. Estas animaciones son muy adecuadas para la transformación de SVG. La mayoría de las veces ocurren en una secuencia continua. En este ejemplo, hay una flecha que se transforma en un círculo. Usar algo que no sea morphing no sería tan sencillo. Lo más probable es que distraiga al usuario en un momento delicado. Es importante utilizar un efecto intuitivo aquí. De lo contrario, la microinteracción podría no ser tan efectiva. Compare, por ejemplo, con, digamos, usar un fundido cruzado. Eso sería más disruptivo y podría desviar la atención de los usuarios. Morphing crea una conexión más sutil y natural entre los elementos gráficos. Es importante recordar que la animación no solo está destinada a deleitar a sus usuarios. También debería proporcionar una mejor UX, liderar e informar a sus usuarios sobre lo que sucede detrás de escena.

Retro moderno — IBM THINK

Siempre he sido fanático del minimalismo en el arte. Especialmente los trabajos de los años 60 que involucran minimalismo y tipografía siempre me llamaron la atención. La tendencia retro moderna ha estado presente por un tiempo. Es, en cierto modo, una continuación natural de la tendencia de la interfaz de usuario plana. Este artículo de Isabella Carvalho ofrece buenas ideas sobre el arte retro y las mezclas de colores. Me hizo querer explorar mucho más la combinación de colores en la web. Me inspiró a encontrar el modo de combinación de reglas CSS que se usa en este bolígrafo. El modo de mezcla es, para mí, una propiedad CSS infrautilizada. Usado en los contextos correctos, puede crear efectos bastante interesantes. Me parece especialmente interesante cuando se combina con animaciones. El póster de IBM THINK utilizado en la demostración también se encuentra en el artículo. Además, el artículo destaca parte del trabajo de Karl Gerstner . Es sorprendente cómo la mayor parte de su trabajo todavía se siente moderno hoy.

Este bolígrafo utiliza un método alternativo para transformar los elementos SVG. El efecto es una animación creada utilizando la técnica de animación de línea SVG. Los diferentes elementos de este bolígrafo son en realidad trazos gruesos y no elementos de trazado SVG. En términos técnicos, no es un morphing de forma SVG, pero da una sensación similar.

¡Eso es todo! Si estás interesado en más sobre anime-js. Asegúrese de consultar mis otros dos artículos sobre la animación con la biblioteca. Cómo crear una animación de marca de verificación y Cómo crear una animación favorita .

Desde que comencé a escribir este artículo, he creado algunas otras demostraciones de morphing SVG:

• Spinner del cargador Morphing
• Aves geométricas — presentación de diapositivas
• Tarjeta expandible en línea
• Morfismo de mezcla de Mozilla
• Spinner cargador Morphing - parte II
• Codepen crear