W3C Amaya

anterior superior

Gráficos y animaciones SMIL

SVG representa las animaciones como elementos entremezclados en la estructura principal que representa la organización de los gráficos. Los elementos de la animación aparecen como hijos de los elementos gráficos que animan. Para permitir al autor centrarse en una animación, la vista de línea temporal le muestra todos los elementos de animación y agrupados de acuerdo con los elementos gráficos que animan.

La vista de línea temporal

La vista de línea temporal presenta las animaciones asociadas con objetos gráficos. Cada objeto animado del documento se representa allí con una representación gráfica de sus elementos de animación.

La siguiente figura muestra los tres objetos animados de un documento. Cada objeto se representa en el lado izquierdo de la vista por medio de una etiqueta con un fondo blanco y un cuadro de selección junto a su etiqueta. Al hacer clic en la etiqueta se destaca el elemento correspondiente en la vista Formateado, lo que le proporciona al usuario el contexto de ese elemento. Si el elemento gráfico tiene un único elemento de animación, como el elemento Rectángulo de la figura, ese elemento de animación se presenta como una barra coloreada. Si hay varios elementos, una única barra en gris representa a la animación completa (El Círculo en la parte inferior de la figura) y un botón marcado con el signo '+' en la etiqueta permite al usuario obtener una representación expandida. El elemento MiTexto, es un ejemplo de tal representación expandida, en la que cada elemento de animación se representa mediante una barra coloreada. El botón se convierte en un signo '-' lo que permite al usuario obtener de nuevo la representación condensada.

La posición en la línea temporal depende de cuándo comienzan y terminan de actuar, y el color de cada barra refleja el tipo de animación:

Vista de animación

Editar animaciones

La vista de línea temporal es útil para percibir de un vistazo la animación de todos los gráficos de un documento, pero también permite a un autor editar la animación. Los elementos existentes pueden modificarse. La mayoría de las manipulaciones se hacen directamente sobre la línea temporal, por ejemplo, al mover una barra o cambiar su extensión. Esto queda inmediatamente reflejado en otras vistas en las que los correspondientes atributos de los elementos de la animación se actualizan (en este caso los atributos inicio y duración).

Para animar el movimiento de un elemento gráfico existente:

Mainpular el tiempo en la vista de línea temporal es más cómodo, ya que permite al usuario comprender mejor la sincronización de un elemento en particular con los otros elementos animados. El usuario puede también modificar las posiciones clave en la vista principal, tan sólo moviendo los puntos con el ratón. Pero las otras vistas siguen estando ahí, y algunos parámetros pueden ajustarse en la vista de estructura editando los atributos, así como también en la vista del código fuente si fuera necesario.

Para crear un cambio de color de un elemento gráfico existente, el usuario comienza seleccionando el elemento que le interesa en la vista principal, y hace clic en el botón superior izquierdo animar_color.

El usuario puede manipular una barra que representa una animación, de la misma manera que manipula un rectángulo en un documento. Obviamente hay algunas limitaciones en la vista de línea temporal. Por ejemplo, las barras coloreadas pueden moverse sólo horizontalmente a lo largo de el eje de tiempo y no puede cambiarse su altura individualmente. Estas limitaciones representan la semántica del lenguaje gráfico de la línea temporal.