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.