Share
Hoy te mostraremos lo básico de usar animateTransform para generar animaciones en línea con SVG (gráficos vectoriales escalables).
Si eres nuevo en SVG, te recomiendo consultar Introducción a los gráficos vectoriales escalables (SVG) para ponerte al día..
Las técnicas que aprenderá le permitirán crear sofisticadas animaciones de imágenes y de iconos sin un solo GIF, JPEG o PNG, sin JavaScript y sin el más mínimo susurro de Flash..
Las animaciones que crees serán fáciles de editar más adelante porque son código puro, y los resultados solo ocuparán un par de KB de precioso ancho de banda cuando se visualicen.
Para animar formas SVG, primero necesitarás la capacidad de crearlas. He encontrado que la forma más fácil de crear SVGs es usar Sketch from Bohemian Coding. Si no posee Sketch, puede obtener una prueba gratuita de 30 días para los fines de este tutorial..
Estaremos manipulando el código SVG, así que después de dibujar una forma en Sketch, cree un sector alrededor y exporte ese sector como un archivo SVG..
Luego podrás abrir tu archivo exportado en un editor de código (como Sublime Text) y copiar el código SVG desde adentro. Todo lo que necesitas es el código de la apertura. etiqueta al cierre etiqueta.
Por ejemplo, Sketch genera el siguiente código SVG para el rectángulo azul que se muestra arriba:
Para hacer que el código sea más fácil de trabajar visualmente, haremos un par de pequeños cambios al código.
Selecciona el svg elementos anchura y altura a 100% y eliminar el viewBox ajuste. También eliminar el Generador comentar, y el título, desc, defs y sol elementos.
Deberías terminar con algo como esto:
Coloque ese código en un documento HTML y, cuando lo vea en el navegador, debería ver el mismo rectángulo azul en su página que vio en Sketch:
Nota: La imagen de arriba incluye un eje X e Y en el fondo, ya que tendrás que entenderlos para crear tus animaciones. Aprenderás por qué en breve..
La respuesta corta es, la animateTransform el elemento genera animaciones configurando las propiedades de transformación en la forma SVG a la que se aplica.
Dado que, la siguiente pregunta lógica es:
Añadiendo transformar la configuración de una forma le permite modificar cómo aparece esa forma en el espacio 2D. Hay cinco tipos diferentes de transformación que puedes realizar:
Accentsconagua
traducirescalagirarskewXsesgadolos animateTransform Este atributo le permite animar entre distintos estados de transformación, por lo que antes de comenzar a animar es importante comprender cómo funcionan las transformaciones..
Debido a que las transformaciones operan en el espacio 2D, todas sus configuraciones se relacionan con las coordenadas X e Y trazadas en un eje X / Y, como se vio en la imagen detrás de nuestro rectángulo azul.
X eje es la línea horizontal en el espacio 2D, y la Y El eje es la línea vertical. Por defecto, cada forma comienza en una posición de 0 tanto en el X y Y eje.0 posición en el X eje, los valores positivos se corresponden con el movimiento hacia la derecha y los valores negativos se corresponden con el movimiento hacia la izquierda.0 posición en el Y eje, los valores positivos se corresponden con el movimiento hacia abajo y los valores negativos se corresponden con el movimiento hacia arriba. Si esto no tiene sentido completo, no se preocupe, ya que será mucho más claro a medida que vea los ejemplos de cada tipo de transformación a continuación..
Tampoco te preocupes por el código para estas transformaciones, ya que lo cubriremos cuando pasemos a crear animaciones. Para empezar, solo quiero que entiendas lo esencial sobre lo que realmente hacen los cinco tipos de transformación..
Esto desplaza la posición de la forma en el eje X (horizontal) y el eje Y (vertical).
Por ejemplo, aquí está nuestro rectángulo azul con traducir valores de 150 sobre el X eje (horizontal) y 20 sobre el Y (eje vertical:
Recuerde de la sección anterior que los valores positivos en la X los ejes se corresponden con el desplazamiento hacia la derecha y los valores positivos en el Y eje corresponde con el movimiento hacia abajo.
Estableciendo el traducir valor por X a positivo 150, Nuestro rectángulo se ha movido a la derecha por 150 píxeles. Estableciendo el valor para Y a positivo 20 ha movido nuestro rectángulo hacia abajo por 20 píxeles.
Esto multiplica el tamaño total de la forma en el eje X (ancho) y el eje Y (altura).
Los ajustes de escala funcionan como multiplicadores del tamaño original de la forma. Por ejemplo, si configuramos el X escala a 3 Haría la forma tres veces más ancha. Si configuramos el Y escala a 1.25 haría la forma un cuarto y cuarto de veces más alta, así:
También traducido (150, 20)Esto rota la forma alrededor de un punto dado por grados..
La rotación funciona estableciendo el número de grados en los que desea rotar la forma. Por ejemplo, aquí está nuestro rectángulo girado por 45 grados:
También traducido (150, 20)Por defecto, la forma girará alrededor de su esquina superior izquierda, pero también puede hacer que gire alrededor de un punto diferente. Cubriremos cómo se hace más adelante en el tutorial..
Esto sesga la forma a lo largo del eje X (horizontal).
El sesgo a lo largo del eje X también funciona en grados. Por ejemplo, en la imagen de abajo, nuestro rectángulo está sesgado 20 grados a lo largo del eje X:
También traducido (150, 20)Esto sesga la forma a lo largo del eje Y (vertical) en grados.
SkewY Funciona exactamente de la misma manera que SkewX, solo la transformación ocurre verticalmente a lo largo del eje Y así:
También traducido (150, 20)Ahora que sabe lo que realmente hacen las transformaciones, puede comenzar a crear animaciones entre diferentes estados de transformación. El proceso básico tiene tres pasos:
desde estado.a estado.desde y el aestado.Esto se entiende mejor a través de un ejemplo práctico, así que comencemos por animar un traducir transformación.
Recordará que anteriormente comenzamos con nuestro rectángulo azul en su posición predeterminada de 0 0, es decir. 0 sobre el X eje y 0 sobre el Y eje. Estableceremos esta posición como nuestra desde estado.
Luego vimos un ejemplo de ese mismo rectángulo azul con la configuración de traducción de 150 20 aplicado, es decir. 150 sobre el X eje y 20 sobre el Y eje. Estableceremos esta posición como nuestra a estado.
Utilizando animateTransform Podemos hacer que el rectángulo se deslice suavemente entre nuestros desde y nuestro a Estados durante un período de dos segundos.
Su forma de SVG, en este caso un rectángulo, deberá tener etiquetas de apertura y cierre, por ejemplo,.
los animateTransform atributo debe colocarse entre estas etiquetas de esta manera:
Eche un vistazo a las propiedades que se han establecido en el animateTransform etiqueta. Estos son los que controlan cómo se ejecuta tu animación..
Hemos establecido tipo para traducir, lo que significa que estaremos aplicando un traducir Tipo de transformación. Según lo previsto, hemos establecido nuestra 0 0 posición en el desde estado, y nuestro 150 20 posición en el a estado.
El valor para empezar se establece en 0s, lo que significa que la animación comenzará cero segundos después de la carga, y dur se establece en 2s, lo que significa que la animación se ejecutará durante un período de dos segundos. Finalmente, hemos incluido repetir cuenta ajustado a indefinido lo que significa que la animación se reproducirá en bucle.
Esto nos da la siguiente animación:
El proceso es exactamente el mismo para rotar los otros cuatro tipos de transformaciones. Después de configurar el tipo valor a cualquier tipo de transformación que desee, ingrese valores para su desde y a estados de transformación.
Por ejemplo, podemos usar los siguientes animateTransform configuraciones para escalar nuestro rectángulo hasta el tamaño que viste en la sección anterior sobre la transformación de escala:
Debido a que los ajustes de transformación de escala multiplican el tamaño original de la forma, comenzamos con un valor de 1 1 sobre el desde ajuste. Haciendo esto se establece su tamaño original en una multiplicación de 1..
Nuestro a ajuste de 3 1.25 animará nuestra transformación de escala hasta tres veces el ancho original en el eje X, y una y cuarto la altura original en el eje Y.
Nota: Encontrará que sus animaciones en el navegador son mucho más suaves que el GIF de captura de pantalla que ve arriba.
También podemos combinar las dos animaciones que hemos creado hasta ahora, para traducir y escalar al mismo tiempo. Solo puedes usar una sola animateTransform etiqueta dentro de tu rect etiqueta, por lo que para usar múltiples animaciones necesitarás incorporar un conjunto de sol Etiquetas, que representan un grupo de objetos SVG.
Para hacer este trabajo, agregue apertura y cierre. rect etiquetas:
Luego agrega tu segunda animación fuera del cierre. etiqueta, pero antes de el cierre etiqueta. En este caso vamos a reintroducir nuestra transformación de traducción:
Ahora tenemos transformaciones de escala y traducción animando simultáneamente:
Puedes usar animateTransform Una vez por forma o grupo. Si necesita agregar más animaciones, envuelva otro conjunto de etiquetas de grupo alrededor de su código y anide su adicional animateTransform etiqueta dentro de ella.
Echemos un vistazo rápido a los tres tipos de transformación restantes, cada uno creado al cambiar solo el tipo, desde y a Ajustes, y también combinados con nuestra original traducción de animación..
En este ejemplo tipo se ha establecido en girar, desde se ha establecido en 0 comenzar sin rotación, y a se ha establecido en 45 entonces giramos 45 grados en dos segundos:
En las siguientes dos animaciones. tipo se ha establecido en skewX y sesgado respectivamente, desde se establece en 0 para empezar sin sesgo, y a se ha establecido en 20 Así que sesgamos 20 grados en dos segundos:
Transformación de skewX animada
Transformación animada del sesgoHay un número infinito de posibilidades para las animaciones que puede crear usando estas técnicas básicas, pero una de las más útiles es la creación de iconos de carga en los que anteriormente podría haber confiado en GIF animados..
Este es un ícono de carga que creé en unos cinco minutos usando Sketch:
Luego lo exporté a un archivo SVG que me dio el siguiente código:
Dado que este icono comprende varias formas dentro de un grupo, y como hemos aprendido anteriormente, puede aplicar animateTransform a un grupo, agregué mi código de animación antes del último cierre etiqueta:
El código anterior establece el ícono para rotar de 0 a 360 grados, es decir, un círculo completo.
Tenga en cuenta que esta vez también he incluido dos números adicionales en ambos desde y a ajustes Esto le dice a la animación que gire alrededor de un punto en el propio eje X / Y interno de la forma de 18 18, es decir, el centro de la forma dado es de 36x36 píxeles de tamaño.
Esto produce la siguiente animación:
Una vez más, su animación en el navegador será más suave que la GIF anterior, así que asegúrese de revisar la realidad. Como puede ver, es muy rápido y fácil armar animaciones que puede obtener un uso práctico y sólido de.
Si aún no has corrido en la animación SVG, ahora deberías tener las herramientas que necesitas para tener un buen comienzo sólido.
