Para sorpresa de nadie, estoy seguro de que hay muchas formas diferentes de hacer lo mismo en la web. La transformación de formas, que es una cosa en la web, no es diferente. Hay algunas tecnologías nativas, algunas bibliotecas que las aprovechan y algunas bibliotecas que hacen las cosas por sí mismas. Veamos algunas de las opciones (con demostraciones) y sopesemos las ventajas y desventajas.
SONRISA
La tecnología nativa y original para la transformación de formas es SMIL. Tenemos una guía para SMIL sobre Programar Plusy un artículo que habla sobre reemplazos, ya que no funciona en los navegadores de Microsoft y Blink amenazó con tirarlo en un momento.
No sugeriría hacer un trabajo importante en SMIL, pero es una transformación de forma OG.
Vea el Pen Sitepoint Challenge # 1 en SVG y SMIL por Noah Blon (@noahblon) en CodePen.
Nuestro artículo Cómo funciona SVG Shape Morphing cubre la transformación de formas SMIL en detalle, y la demostración anterior es de An Intro to SVG Animation with SMIL de Noah Blon.
Para tener una idea de lo que debe tener el mismo número de puntos, puede disfrutar jugando con Shape Shifter:
MorphSVG (complemento GSAP de Greensock)
Avanzando hacia probablemente la opción más robusta posible, MorphSVG de Greensock es una potencia. Tener en cuenta:
MorphSVGPlugin es un complemento adicional para los miembros del Club GreenSock (niveles “Shockingly Green” y “Business Green”). Es nuestra forma de mostrar nuestro agradecimiento a quienes están impulsando la innovación en GreenSock.
Vale la pena. Solo MorphSVG es asombroso. A diferencia de casi cualquier otro método de transformación de formas, se puede interpolar entre formas de cualquier número de puntos. Lo hace de forma eficaz, de forma segura en todos los navegadores, y le brinda un control más preciso sobre cómo se desarrolla la animación.
Vea la compleja transformación que ocurre aquí:
Vea el control deslizante Pen Morphing SVG – Mujeres del siglo XX de Sullivan Nolan (@nolakat) en CodePen.
Si quieres jugar con MorphSVG, creé un lápiz de arrastrar y soltar para cambiar entre dos formas (mejores resultados con SVG con viewBox="0 0 100 100" SVG con solo uno <path>):
Vea la máquina Pen Morph de Chris Coyier (@chriscoyier) en CodePen.
Si es usuario de Adobe Muse, es posible que le interese el widget Muse Morph, que combina Illustrator, Muse y Greensock MorphSVG.
SnapSVG
La función animate () de SnapSVG animará las propiedades de un elemento SVG, incluidos los datos de ruta. Codrops tiene excelentes ejemplos de esto en acción. Aquí hay una pequeña película que muestra algunos de ellos:
SnapSVG es, en cierto sentido, el hermano mayor de Raphaël, que podría hacer cosas como esta:
anime.js
La biblioteca anime.js más nueva tiene incorporada la transformación de formas.
CSS
Es un poco difícil de creer, ¡pero CSS se está metiendo en la acción de transformación de formas! Eric Willigers, un desarrollador de Chrome, me envió un correo electrónico el año pasado:
‘d’ se ha convertido en un atributo de presentación. Esto permite que los elementos de ruta SVG se animen utilizando animaciones CSS y animaciones web, con fotogramas clave de ruta (‘…’).
Supongo que esto es un cambio de especificación, por lo que los navegadores distintos de Chrome, presumiblemente, comenzarán a permitir esto. Por ahora, esto funciona muy bien en Chrome:
Vea los ejemplos de Pen Simple Path por Chris Coyier (@chriscoyier) en CodePen.
SVG Morfeo
SVG Morpheus es una biblioteca de JavaScript completamente dedicada a la transformación de formas. Aquí hay una gran demostración en acción:
Vea la evolución de Pen Mobiltelefonens (SVG Shape Morphing) de Noel Delgado (@noeldelgado) en CodePen.
KUTE.js
Hay un complemento SVG para Kute.js que permite la animación de propiedades SVG, incluida la transformación de formas.
Vea el Pen Morph SVG con KUTE.js por thednp (@thednp) en CodePen.
La API le brinda cierto control sobre la transformación, como la precisión con la que desea que sea y la capacidad de invertir la dirección de dibujo para que los diferentes puntos coincidan con la interpolación.
d3
d3, probablemente la biblioteca más grande que existe para la gente de visualización de datos, también puede realizar cambios de forma. Aquí hay una grabación GIF de una demostración de Mike Bostock:
También hay un complemento d3 llamado d3-interpolate-path que ayuda a mejorarlo:
Interpola el atributo de ruta `d` sin problemas cuando A y B tienen un número diferente de puntos.
mo.js
“Motion graphics para la web” es el lema de mo.js, otra biblioteca más nueva. Oleg Solomka (@LegoMushroom) tiene demostraciones increíbles de lo que es capaz de:
Vea el ejemplo de Pen Mole :: property curves de LegoMushroom (@ sol0mka) en CodePen.
bodymovin
Si eres un aficionado a los vídeos antes de convertirte en un usuario de la web (o aún eres ambos), quizás tengas experiencia trabajando en Adobe After Effects, que se trata de crear “gráficos en movimiento y efectos visuales increíbles”. La biblioteca bodymovin exporta After Effects a SVG, incluida una gran cantidad de acción de transformación en caliente. Aquí tienes una gran demostración:
Vea el monstruo Pen svg jou jou de kittons (@airnan) en CodePen.