Una mirada a la animación de gráficos vectoriales escalables (SVG)
Hoy vamos a continuar nuestra discusión sobre Gráfico vectorial escalable (SVG), Y esta vez vamos a trabajar con Animación SVG. Sin embargo, no te asustes, la animación SVG es relativamente fácil y, de hecho, en esta publicación comenzaremos con lo básico.
Implementación básica
La animación en SVG se puede hacer a través de
Como puede ver en el fragmento de código anterior, agregamos el
Nombre del Atributo: Este atributo especifica qué atributo del elemento se verá afectado en la animación.
desde: Este atributo es opcional, podemos especificar un valor exacto o dejarlo para que comience desde donde estaba.
a: Este atributo especifica la dirección de la animación. Dependiendo del valor especificado en Nombre del Atributo, los resultados pueden variar Pero en este ejemplo se extenderá la altura.
dur: Este atributo especifica la duración de la animación. El valor de este atributo se expresa en la sintaxis del valor del reloj. Por ejemplo, 02:33 representa 2 minutos y 33 segundos, mientras que 3h es igual a 3 horas, pero no necesitamos tanto tiempo, así que especificamos la duración por solo 3s o 3 segundos;
Lo mismo va para r).
- Demostración de implementación básica
Elemento móvil
Al mover elementos SVG, solo necesitamos apuntar a la coordenada del elemento X y y;
En el ejemplo anterior, movemos el rectángulo de 0 a 200 en 3 segundos, el rectángulo aparecerá moviéndose horizontalmente de izquierda a derecha. Además, si nos fijamos bien, también agregamos otro atributo a la llenar.
llenar el atributo aquí no tiene nada que ver con el color de fondo como en los otros elementos SVG. Este atributo especifica cómo actuará la animación después de que finalice la duración. En este ejemplo nosotros congelar El elemento afectado por lo que se queda donde termina la animación..
También funciona de manera similar a la cx o cy, al igual que:
- Demo de elementos en movimiento
Animar múltiples atributos
Hasta ahora, solo nos dirigimos a un atributo para animarlo, pero también es posible animar más de un atributo a la vez. El siguiente ejemplo muestra cómo lo hacemos:
Como puedes ver, funciona de una manera similar, solo que ahora tenemos dos
- Demostración de atributos múltiples
Siguiendo un camino
En nuestro post anterior en Trabajando con texto en SVG, Te hemos mostrado cómo hacer fluir el texto a una ruta. También es posible hacer lo mismo en Animación SVG, Podemos animar un elemento para seguir un camino. Aquí hay un ejemplo.
El camino está mejor definido dentro de un carné de identidad con
Eso es todo, ahora vamos a verlo en acción;
- Demo de ruta siguiente
Transformaciones
También podemos usar la transformación como escala, traducir y girar Para la animación, y para ello utilizaremos.
Las transformaciones en SVG comparten principios similares con CSS3, y lo hemos cubierto bastante ampliamente en nuestra publicación anterior sobre la transformación 2D3 de CSS3..
- Demo de Transformación
Pensamientos finales
Dependiendo de tu habilidad en SVG Animation puedes crear algo como esto.
Una de las ventajas de usar SVG Animation sobre Flash Animation es que no depende de complementos de terceros para funcionar y también es considerablemente más rápido que Flash. Después de que Adobe detuvo su compatibilidad con Flash en Android, es posible que desee comenzar a probar este enfoque para ofrecer animación en su próximo sitio web.
Referencias adicionales
- SVG Animate Documentation
- Técnicas avanzadas de animación SVG
- Ver demostración
- Descargar fuente
