Transformar SVG con reaccionar-primavera

El efecto morphing me ha intrigado desde que era pequeño. Hay algo en una animación que cambia de forma que siempre capta mi atención. La primera vez que vi la transformación me dejó preguntándome  : “Vaya, ¿cómo hicieron eso?”. ” Desde entonces, he creado demostraciones y escrito un artículo sobre el efecto.

Hay muchas opciones cuando se trata de diferentes bibliotecas de animación que admiten la transformación. Muchos de ellos son buenos y ofrecen numerosas funciones. Últimamente me ha absorbido reaccionar-spring . React-spring es una ingeniosa biblioteca de animación basada en la física construida en React. Adam Rackis publicó recientemente una buena descripción general del mismo . La biblioteca viene con muchas características que incluyen, entre muchas otras, la transformación SVG. De hecho, la belleza de reaccionar-spring radica en cómo admite la transformación. Le permite hacerlo directamente en el marcado donde define sus descriptores de rutas SVG. Esto es bueno desde una perspectiva contable. Los descriptores de ruta SVG están donde normalmente se esperaría que estuvieran.

Aquí hay un video de lo que estamos analizando en este artículo:

Es un efecto de transformación en una secuencia de incorporación. Aquí, se utiliza como efecto de fondo. Está destinado a complementar la animación de primer plano; para que se destaque un poco más en lugar de apoderarse de la escena.

Creando el documento SVG

Lo primero que queremos hacer es crear el modelo subyacente. Normalmente, una vez que tengo una idea clara de lo que quiero hacer, creo algún tipo de diseño. La mayoría de mis exploraciones comienzan con un modelo y terminan con una demostración. En la mayoría de los casos, significa crear un documento SVG en mi editor de vectores. Utilizo Inkscape para dibujar mis SVG.

Cuando creo documentos SVG, utilizo las proporciones exactas. Creo que es mejor ser preciso. Para mí, ayuda a mi percepción de lo que quiero crear cuando uso el mismo sistema de coordenadas en el editor de vectores que en el navegador y el editor de código. Por ejemplo, digamos que está a punto de crear un ícono SVG de 24 px ✕ 30 px, incluido el relleno. El mejor enfoque es utilizar exactamente el mismo tamaño: un documento SVG de 24 píxeles de ancho por 30 píxeles de alto. Si las proporciones resultan incorrectas, siempre se pueden ajustar más adelante. SVG es indulgente en ese sentido. Es escalable, no importa lo que hagas.

El documento SVG que estamos creando tiene 256 píxeles de ancho y 464 píxeles de alto.

dibujando los modelos

Al crear modelos, debemos pensar dónde colocamos los nodos y cuántos nodos usar. Esto es importante. Aquí es donde sentamos las bases para la animación. Modelar es de lo que se trata el morphing. Tenemos un conjunto de nodos que se transforma en otro. Estas colecciones de nodos deben tener exactamente la misma cantidad de nodos. En segundo lugar, estos conjuntos deberían correlacionarse de alguna manera.

Si la relación entre las formas vectoriales no se piensa cuidadosamente, la animación no será perfecta. Todos y cada uno de los nodos afectarán la animación. Su posición y curvatura deben ser las correctas. Para obtener información más detallada sobre cómo se construyen los nodos en las rutas SVG, consulte la explicación de las curvas de Bézier en MDN.

En segundo lugar, debemos tener en cuenta ambas formas. Uno de los vectores puede contener partes que no se encuentran en el otro. O puede haber otras diferencias entre los dos modelos. Para estos casos, puede ser una buena idea insertar nodos adicionales en determinados lugares. Lo mejor es formar estrategias. Esta esquina va allí, esta línea recta se curva y así sucesivamente.

He preparado un bolígrafo para ilustrar cómo se ve cuando los conjuntos se correlacionan mal versus cuando se diseñan con precisión. En el siguiente ejemplo, en el efecto de transformación de la izquierda, los nodos se colocan aleatoriamente. Los nodos que forman el número uno y dos no tienen relación. En el ejemplo de la derecha, la ubicación de los nodos se planifica con más cuidado. Esto conduce a una experiencia más coherente.

el primer modelo

La herramienta Línea es lo que usamos para dibujar la primera forma vectorial. Como el modelo que estamos creando es más abstracto, es un poco más indulgente. Todavía tenemos que pensar en la ubicación y la curvatura, pero permite un mayor descuido.

En cuanto a los vectores y el tamaño, lo mismo ocurre con la creación de modelos para transformar. Es un proceso iterativo. Si no sale bien la primera vez, siempre podemos volver atrás y ajustarnos. Por lo general, se requieren una o dos iteraciones para que la animación brille. Así es como se ve el modelo una vez terminado.

El resultado es una forma SVG abstracta y suave con ocho nodos.

El segundo y tercer modelo.

Una vez que se completa el primer modelo, es hora de dibujar el segundo modelo (que también podemos considerar como un estado). Esta es la forma en la que se transformará el primer conjunto. Este podría ser el estado final, es decir, un único efecto de transformación. O podría ser un paso en el camino, como un fotograma clave. En el caso que estamos viendo, hay tres pasos. Nuevamente, cada modelo debe correlacionarse con el anterior. Una forma de asegurarse de que los modelos coincidan es crear el segundo vector como un duplicado del primero. De esta manera, sabemos que los modelos tienen la misma cantidad de nodos y la misma apariencia.

Ten cuidado con el editor. Los editores vectoriales suelen optimizar el tamaño y formato del archivo. Es muy posible que los modelos sean incompatibles al guardar los cambios. Me he acostumbrado a inspeccionar el código SVG después de guardar el archivo. También será útil estar familiarizado con el formato del descriptor de ruta . Es un poco críptico si no estás acostumbrado. También podría ser una buena idea desactivar la optimización en las preferencias del editor de vectores.

Repita el proceso anterior para la tercera forma. Copie, reubique todos los nodos y establezca el tercer color.

¡Luces, CAMARA, ACCION!

Una vez creados los modelos, hemos hecho la mayor parte del trabajo. Ahora es el momento de mirar la parte de animación. React-spring viene con un conjunto de ganchos que podemos usar para animación y transformación. useSpring es un candidato perfecto para el efecto de este ejemplo. Está destinado a usarse para animaciones individuales como la que estamos creando. Aquí se explica cómo iniciar animaciones con el useSpringgancho.

const [{ x }, set] = useSpring(() = ({  x: 0,}));

Lo anterior nos proporciona una propiedad de animación, xpara construir nuestro efecto de transformación. Lo bueno de estas propiedades de animación es que podemos modificarlas para crear casi cualquier tipo de animación. Si el valor está desactivado, podemos cambiarlo mediante interpolación.

El segundo parámetro, la setfunción, nos permite activar actualizaciones. A continuación se muestra un fragmento de código que muestra su uso. Actualiza el valor de la animación xcon un controlador de gestos useDragde la biblioteca reaccionar-usar-gestos . Hay muchas formas en las que podemos activar animaciones en reaccionar-spring.

const bind = useDrag(  ({ movement: [x] }) = {    // ...    set({ x });  },);

Ahora tenemos todo configurado para combinar nuestros modelos, los descriptores de ruta, con el marcado. Al agregar la animatedpalabra clave al código JSX, activamos el sistema de animación de reaccionar-spring. Con la llamada de interpolación to, anteriormente denominada interpolate, convertimos distancias de arrastre en formas transformadas. La matriz de salida contiene los modelos ya discutidos. Para implementarlos, simplemente copiamos los descriptores de ruta del archivo SVG en el marcado. Tres descriptores diferentes, dde tres pathelementos diferentes copiados de tres archivos SVG diferentes, ahora se combinan en uno. Así es como se ve el nodo JSX cuando se activa con una animación de reacción de resorte.

svg ...  animated.path    d={x.to({      range: [-400, -200, 0],      output: [        // First model        "M 157.81292,131.16918 C 128.33979,127.45582 59.004493,121.76045 53.287478,168.06051 47.570462,214.36057 86.454799,213.14326 77.881699,234.66986 69.308599,256.19646 59.042495,268.13837 67.634107,288.98209 76.225718,309.82581 103.27857,320.05328 138.34249,312.55156 173.40641,305.04984 204.93111,298.87002 208.02612,279.75926 211.12113,260.6485 189.48716,257.88808 188.5557,229.54606 187.62424,201.20404 212.01456,174.45091 200.8528,155.7634 189.69104,137.07589 187.28605,134.88254 157.81292,131.16918 Z",        // Second model        "M 157.81292,131.16918 C 128.33979,127.45582 48.756902,138.1566 53.287478,168.06051 57.818054,197.96442 75.182448,197.77187 73.782662,224.42227 72.382877,251.07266 70.314846,257.89078 72.757903,278.7345 75.20096,299.57822 88.114636,303.32873 113.94876,307.60312 139.78288,311.87751 159.84171,314.24141 176.25858,295.13065 192.67546,276.01989 203.83379,256.86332 190.60522,228.5213 177.37665,200.17928 205.866,189.8223 211.10039,171.13479 216.33478,152.44728 187.28605,134.88254 157.81292,131.16918 Z",        // Third model        "M 157.81292,131.16918 C 128.33979,127.45582 86.672992,124.83473 71.733144,166.01099 56.793295,207.18725 69.033893,203.92043 80.955976,230.57083 92.87806,257.22123 55.968217,259.9403 59.436033,279.75926 62.90385,299.57822 94.985717,299.83924 132.0922,306.16316 169.19868,312.48708 186.48544,320.38997 198.80328,288.98209 211.12113,257.57422 199.73475,245.59097 195.72902,217.24895 191.72328,188.90693 209.96504,178.54995 215.19943,159.86244 220.43382,141.17493 187.28605,134.88254 157.81292,131.16918 Z",      ],    })}  //svg

Veamos las diferencias entre un pathelemento JSX estándar y lo que tenemos actualmente. Para implementar la animación de transformación, tenemos:

• Se agregó la palabra clave animada para hacer que el pathelemento JSX se anime con React Spring.
• cambió el descriptor dde una cadena a una interpolación de resorte de React, y
• convirtió la distancia xen una animación de fotograma clave entre tres pathdescriptores.

Entorno de desarrollo

Todavía tengo que encontrar el entorno de desarrollo perfecto para trabajar con SVG. Actualmente, voy y vengo entre el editor de vectores, el IDE y el navegador. Hay un poco de copia y cierta redundancia involucrada. No es perfecto, pero funciona. He experimentado un poco, en el pasado, con scripts que analizan SVG. Todavía no he encontrado algo que pueda aplicar a todos los escenarios. Quizás soy yo quien se equivocó. De lo contrario, sería fantástico si el desarrollo web con SVG pudiera ser un poco más fluido.

¡Aquí vamos!

¡Por último, pero no menos importante, la demostración!

¡Gracias por leer!