ANIMACIONES-SVG EN JAVA

Vista previa del material en texto

ANIMACIONES SVG
EDWIN HERNÁNDEZ
GABRIELA GUACHAMÍN
• SVG (Scalable Vector Grafics) Vectores Gráficos Escalables, las animaciones 
SVG nos permite tener un contenido visual que ayuda a los desarrolladores a 
crear mejores experiencias web, con la que se logran animar imágenes del 
logotipo, ilustraciones vectoriales, imágenes de la interfaz de usuario, el 
contenido de infografía, iconos, etc.
• Una de las grandes utilidades de SVG es la posibilidad de realizar
animaciones, cambiando los gráficos vectoriales representados a lo largo del
tiempo. Existen dos formas de realizar animaciones en SVG, la primera
consiste en utilizar elementos 'animation', y la segunda es acceder
directamente al DOM del SVG y modificar atributos de los gráficos.
• Las animaciones de SVG han sido definidas para permitir SMIL (Synchronized
Multimedia Integration Language), esto representa una ventaja ya que se
trata de un lenguaje basado en xml, enfocado a realizar presentaciones
multimedia con etiquetas para variaciones temporales, transiciones, etc.
TRES MÉTODOS DIFERENTES PARA LA ANIMACIÓN 
DE ARCHIVOS SVG
• En primer lugar, puede utilizar las @keyframes funcionan para animar a su 
visual de contenido SVG usando CSS.
• Animación de SVG directamente con SMIL (lenguaje de integración 
multimedia sincronizada)
• JavaScript que proporciona funciones básicas para hacer animaciones, por 
supuesto, siempre existe la opción de elegir un marco de JavaScript para este 
propósito.
ESTILOS SVG
• Los elementos SVG aceptan algunas de las propiedades estándar de CSS, 
pero no todas. Además, los SVGs aceptan un conjunto especial de atributos 
"presentaciones", como fill ,xyy , que también sirven para definir cómo se 
representa visualmente un SVG. No hay diferencia funcional entre especificar 
un estilo SVG a través de CSS o como un atributo - la especificación SVG 
simplemente divide las propiedades entre los dos.
Hay tres grandes categorías de propiedades de estilo específicas de
SVG: color , degradado ,dimensional y trazo.
• Propiedades de color: consiste en relleno y trazo . Fill es equivalente al color
de fondo en CSS, mientras que stroke es equivalente a border-
color . Utilizando Velocity, estas propiedades se animan de la misma manera
que se animan las propiedades estándar de CSS.
• Propiedades del degradado: Incluyen stopColor, stopOpacity y offset. Se
utilizan para definir gradientes de uso múltiple que estructura a través de
marcado SVG.
• Propiedades dimensionales: son aquellas que describen la posición y el
tamaño de un elemento SVG. Estos atributos difieren ligeramente entre los
tipos de elementos SVG (por ejemplo, rect en vez de círculo)
• Propiedades de trazo: son un conjunto único de definiciones de estilo SVG con
la capacidad de crear trazos personalizados y la capacidad de animar el
movimiento. Los casos de uso incluyen efectos de escritura a mano, efectos de
revelación gradual y mucho más.
BENEFICIOS DE SVG
• Los gráficos definidos en SVG tienen tamaños de archivo más pequeños que sus 
equivalentes PNG / JPEG.
• Los gráficos SVG pueden escalarse a cualquier resolución sin la pérdida de 
claridad, se ven nítidas en todas las pantallas de escritorio y móviles.
• Puede animar los componentes individuales de un gráfico SVG en tiempo de 
ejecución (utilizando JavaScript y CSS).
• Sus imagen se carga a través de todos los tamaños utilizando la misma imagen, por 
lo que no tienen que usar por separado. Como es, SVG no hace ninguna solicitud 
adicional al servidor, ya que no está utilizando peticiones HTTP directas, sino que 
todas las imágenes viene incorporado dentro del código fuente de la página web.
APLICACIONES DE ANIMACIONES SVG
APLICACIONES DE ANIMACIONES SVG
APLICACIONES DE ANIMACIONES SVG
• http://demos.bonsaijs.org/demos/pie/index.html
http://demos.bonsaijs.org/demos/pie/index.html