La animación de gráficos vectoriales escalables , un formato de gráficos vectoriales estándar abierto basado en XML , es posible a través de varios medios:
- Scripting : ECMAScript es un medio principal para crear animaciones e interfaces de usuario interactivas dentro de SVG.
- Estilo : Desde 2008, el desarrollo de animaciones CSS como una característica en WebKit ha hecho posible la animación implícita basada en hojas de estilo de archivos SVG desde el Modelo de objetos de documento (DOM).
- SMIL : Lenguaje de integración multimedia sincronizado, un medio recomendado [1] [2] [3] para animar hipermedia basado en SVG , compatible con Amaya (2003) [4] Opera (2006), [5] Mozilla Firefox (2011), [6] Navegadores web Google Chrome (2016) y Safari (2017) , [7] y cualquier navegador que tenga como objetivo pasar la prueba de estándares web Acid3 de 2008 (es decir, antes de la "simplificación" de la prueba en 2011), ya que requiere compatibilidad con SMIL para pruebas 75 y 76.
gráficas vectoriales escalables | |
---|---|
Las bibliotecas también se han escrito como una corrección para dar soporte SMIL a los navegadores actuales habilitados para SVG. [8] Este método también se conoce como SVG + Time. [ cita requerida ]
Dado que SVG es compatible con los gráficos de red portátiles (PNG) y las imágenes de trama JPEG , se puede utilizar para animar tales imágenes como una alternativa a APNG y los gráficos de red de múltiples imágenes (MNG).
Historia
Los elementos de animación SVG se desarrollaron en colaboración con el Grupo de trabajo de multimedia sincronizada del World Wide Web Consortium (W3C), desarrolladores del lenguaje de integración multimedia sincronizado , cuya primera versión se publicó en 1999. SVG 1.0 se convirtió en una recomendación del W3C el 4 de septiembre de 2001. Ciertos navegadores web agregaron soporte para la animación SVG durante la década de 2000, incluido Amaya ya en 2003, pero la animación SVG solo fue compatible con navegadores de uso generalizado a partir de la década de 2010, especialmente en Firefox 4 (2011). Internet Explorer admite la animación ECMAScript y su sucesor Microsoft Edge admite animaciones ECMAScript y CSS a partir de la versión 42.17134.
El Grupo de Trabajo SYMM, en colaboración con el Grupo de Trabajo SVG, ha creado [ año necesario ] la especificación de Animación SMIL, que representa un conjunto de características de animación XML de propósito general . SVG incorpora las funciones de animación definidas en la especificación de animación SMIL y proporciona algunas extensiones específicas de SVG.
Ejemplos de
Los siguientes fragmentos de código demuestran tres técnicas para crear imágenes SVG animadas en navegadores compatibles. Las partes relevantes están resaltadas en amarillo. Haga clic en las miniaturas de las imágenes para ver sus versiones animadas.
Animación SVG usando SMIL
version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" width = "100%" height = "100%" viewBox = "-4 -4 8 8" > Animación SVG usando SMIL írculo> cx = "0" cy = "1" r = "2" trazo = "rojo" relleno = "ninguno" > atributoName = "transformar" atributoType = "XML" type = "rotar" from = "0" to = "360" begin = "0s" dur = "1s" repeatCount = "indefinido" />
Animación SVG usando CSS
version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" width = "100%" height = "100%" viewBox = "-4 -4 8 8" > Animación SVG usando CSS type = "text / css" > @keyframes rot_kf { from {transform: rotate (0deg); } para {transformar: rotar (360 grados); } } .rot {animación: rot_kf 1s lineal infinito; } class = "pudrirse" cx = "0" cy = "1" r = "2" trazo = "azul" relleno = "ninguno" />
Animación SVG usando ECMAScript
version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" width = "100%" height = "100%" viewBox = "-4 -4 8 8" onload = "rotar (evt)" > Animación SVG usando ECMAScript < id del círculo = "rot" cx = "0" cy = "1" r = "2" trazo = "verde" relleno = "ninguno" />
Aunque el ejemplo anterior funciona, no es la implementación óptima; la animación está limitada a 50 fotogramas por segundo (FPS). El uso requestAnimationFrame
proporciona un mejor rendimiento y puede alcanzar los 60 FPS:
version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" width = "100%" height = "100%" viewBox = "-4 -4 8 8" onload = "init ()" > Animación SVG usando requestAnimationFrame () id = "rot" cx = "0" cy = "1" r = "2" stroke = "green" fill = "none" />
Atributos SMIL para identificar el atributo objetivo
Los siguientes son el atributo de animación que identifica el atributo de destino para el elemento de destino dado cuyo valor cambia con el tiempo. attributeName = "
especifica el nombre del atributo de destino. Se puede utilizar un prefijo XMLNS para indicar el espacio de nombres XML para el atributo. El prefijo se interpretará en el ámbito del elemento de animación actual.
attributeType = "CSS | XML | auto"
especifica el espacio de nombres en el que se definen el atributo de destino y sus valores asociados. CSS
especifica que el valor de 'attributeName' es el nombre de una propiedad CSS definida como animable en esta especificación. XML
especifica que el valor de 'attributeName' es el nombre de un atributo XML definido en el espacio de nombres XML predeterminado para el elemento de destino. El atributo debe definirse como animable en esta especificación. auto
El valor predeterminado es 'auto'. La implementación debe hacer coincidir el 'Nombre de atributo' con un atributo para el elemento de destino. La implementación debe buscar primero en la lista de propiedades CSS un nombre de propiedad coincidente y, si no se encuentra, buscar el espacio de nombres XML predeterminado para el elemento.
Animación SMIL que demuestra el cambio en la transformación (escala) y los atributos CSS (opacidad y desplazamiento del guión)
Animación SMIL que demuestra el movimiento a lo largo de un camino y simulación de 3D
Animación SMIL que demuestra la transformación de formas (caminos)
Animación CSS3 que demuestra cambios en la transformación (rotación, escala y traslación) y simulación de 3D
El software wiki de MediaWiki genera automáticamente miniaturas estáticas y no animadas de imágenes SVG. Ver la imagen .svg real de cada página de descripción respectiva mostrará su animación en un navegador compatible.
Bibliotecas
Hay varias bibliotecas de JavaScript para trabajar con animaciones SVG. Una ventaja del uso de tales bibliotecas es que estas bibliotecas a menudo resuelven problemas de incompatibilidad en los navegadores a través de la abstracción . Ejemplos de bibliotecas incluyen Raphaël y Velocity.js
Ver también
- Animaciones CSS
- D3.js
- Animación flash
- Animación GIF
Referencias
- ^ "Especificación de gráficos vectoriales escalables (SVG) 1.1" . Consorcio World Wide Web . Enero de 2003 - abril de 2009 . Consultado el 4 de febrero de 2010 . Cite journal requiere
|journal=
( ayuda ) - ^ Festa, Paul (9 de enero de 2003). "W3C lanza el estándar de scripting, advertencia" . CNet . Consultado el 24 de febrero de 2010 .
- ^ Bulterman, DCA ; Lloyd Rutledge (noviembre de 2008). SMIL 3.0: Multimedia interactiva para la web, dispositivos móviles y Daisy Talking Books . X.media.publishing (2ª ed.). Nueva York: NY: Springer. pag. 508. ISBN 978-3-540-78546-0.
- ^ "Soporte de animación SVG en Amaya" . Consorcio World Wide Web . 15 de abril de 2003 . Consultado el 4 de febrero de 2010 .
- ^ McCathieNevile, Charles (31 de octubre de 2006). "Animando tu SVG" . Comunidad de desarrolladores de Opera . Opera Software . Archivado desde el original el 7 de marzo de 2010 . Consultado el 24 de febrero de 2010 .
- ^ "Animación SVG con SMIL" . 29 de marzo de 2011.
- ^ "¿Cuándo puedo usar la animación SVG SMIL?" .
- ^ Dahlström, Erik (agosto de 2008). "Trucos de javascript, SVG y SMIL" . Opera Software en SVG Open . Consultado el 24 de febrero de 2010 .
enlaces externos
- Especificación SVG 1.1 - Animación
- Animación SVG y otros tutoriales de SVG
- Animaciones SMIL incrustadas en SVG - Capítulo de SVG Primer (W3C)
- Ejemplos de animación SVG
- Herramienta de animación SVG
- SVG gratis