Animar objetos

Una animación crea una ilusión mediante un ciclo rápido a través de una serie de imágenes, cada una de las cuales es ligeramente distinta de la anterior. El cerebro percibe la secuencia de imágenes como una sola escena que va cambiando. En una película, una cámara registra muchas fotografías, o fotogramas, cada segundo para crear esta ilusión. Cuando un proyector reproduce estos fotogramas, los espectadores ven una imagen en movimiento. La animación por PC es similar, excepto que los fotogramas registrados pueden estar más separados en el tiempo porque el equipo puede interpolar y animar los cambios que hay entre ellos.

¿Cómo funciona la animación en Expression Blend?

En Microsoft Expression Blend, las animaciones se basan en fotogramas clave que definen los puntos iniciales y finales de una transición visual suave. Para crear una animación en Expression Blend, debe crear un guión gráfico y en él, debe establecer los fotogramas clave en una escala de tiempo para marcar los cambios en las propiedades. Por ejemplo, puede establecer un fotograma clave en la marca de 0 segundos para registrar la posición de un rectángulo en la parte izquierda de la mesa de trabajo y, a continuación, establecer un fotograma clave en la marca de 1 segundo para registrar la posición del mismo rectángulo en la parte derecha de la mesa de trabajo. La animación resultante estará basada en la transformación que ocurre en las propiedades X e Y del rectángulo durante un segundo. Cuando ejecute un guión gráfico de animación, Expression Blend interpolará los cambios en las propiedades a lo largo del período de tiempo designado y mostrará los resultados en la aplicación. De esta forma, puede animar cualquier propiedad que pertenezca a un objeto en la mesa de trabajo, incluso las propiedades no visuales.

Fotogramas clave en una escala de tiempo de un guión gráfico llamado MoveRight, con los cambios marcados de las propiedades de traslación X e Y de un objeto rectángulo

En algunos programas de animación por PC, puede crear animaciones fotograma a fotograma, lo que significa que cada fotograma puede contener una imagen (u objeto) diferente. Las animaciones resultantes pueden ser muy largas y consumir muchos recursos en tiempo de ejecución. Por esta razón, la animación en Expression Blend se basa en fotogramas clave que registran los cambios en las propiedades y animan la transición entre estos cambios de propiedades en tiempo de ejecución. Además, en Expression Blend, todos los objetos que desee que aparezcan o desaparezcan durante una escala de tiempo de animación están presentes en toda la escala de tiempo. Sin embargo, puede usar fotogramas clave para cambiar sus propiedades de visibilidad y hacer que los objetos aparezcan o desaparezcan.

[!NOTA]

Aunque no puede crear espontáneamente nuevos objetos en un guión gráfico en Expression Blend, puede generar nuevos objetos y nuevos guiones gráficos de animación mediante programación en archivos de código subyacente. Para obtener más información, vea el tema Animación y temporización en la sección Windows Presentation Foundation de MSDN.

Guiones gráficos

Los guiones gráficos son contenedores que contienen escalas de tiempo de animación. Expression Blend incluye un control selector de guiones gráficos, desde el que puede seleccionar y buscar guiones gráficos en el proyecto.

Para obtener más información, vea Abrir o cerrar un guión gráfico.

El selector de guiones gráficos enumera varios guiones gráficos que se pueden abrir

Al seleccionar un guión gráfico, puede usar un menú emergente para duplicar, invertir, eliminar, cambiar el nombre o cerrar el guión gráfico seleccionado actualmente, o bien para crear un nuevo guión gráfico.

Para obtener más información, vea Duplicar o invertir un guión gráfico y Cambiar el nombre de un guión gráfico.

Menú emergente de guión gráfico

Puede establecer las propiedades de los guiones gráficos para que éstos se inviertan o repitan automáticamente al llegar al final de su última escala de tiempo.

Para obtener más información, vea Modificar un guión gráfico para repetir o invertir al final de su ciclo.

Puede crear guiones gráficos cuando se encuentre en las siguientes ubicaciones (o ámbitos) de la aplicación:

• En el cuerpo principal del documento   Si la finalidad de la aplicación es presentar una animación o si no necesita volver a usar la animación en otro lugar, puede crear las escalas de tiempo de animación en el cuerpo principal del documento.

  Para obtener un ejemplo, vea Crear una animación sencilla.

• En una escena o control de usuario    Si necesita volver a usar una animación varias veces en un único documento o en otra aplicación, puede crear las escalas de tiempo de animación en un control de usuario. Esto resulta útil también si desea organizar las animaciones en distintos documentos o proyectos. Los controles de usuario se pueden agregar a la mesa de trabajo como si fueran cualquier otro control (por ejemplo, un botón). Para obtener más información, vea la sección "Escenas" a continuación.

  Para obtener un ejemplo, vea Crear un control de usuario vacío o Crear un nuevo control de usuario en un proyecto.

• En la plantilla de un control   Si desea que todos los controles de un tipo específico (por ejemplo, botones) en la aplicación se animen de la misma forma, puede crear la animación en la plantilla del control. Esto no significa que todos los controles tengan que ser idénticos. Si usa el enlace a plantilla (enlace de una propiedad en la plantilla con una propiedad en el control al que se aplica la plantilla), cada uno de los controles puede tener un color diferente u otra apariencia visual en su animación respectiva.

  Para obtener más información, vea Elegir y usar controles interactivos. Para obtener un ejemplo de Windows Presentation Foundation (WPF), vea Inténtelo: agregar animación a un botón.

• En un estado   Si desea modificar la animación que tiene lugar después de realizar la transición a un nuevo estado, puede seleccionar el estado en el panel Estados y hacer clic en la opción Mostrar escala de tiempo  del panel Objetos y escala de tiempo para realizar los cambios.

  Para obtener información acerca de cómo trabajar con estados, vea Definir distintos estados visuales para un control.

Los guiones gráficos se pueden controlar (iniciar, detener, pausar) mediante desencadenadores que se establecen en objetos, a través de controles de comportamiento o haciendo uso de controladores de eventos.

Para obtener más información, vea Controlar cuándo se ejecuta un guión gráfico.

Escalas de tiempo

Las escalas de tiempo proporcionan una estructura para las secuencias de animación en la aplicación. Una animación en Expression Blend está formada por una escala de tiempo en la que se registran fotogramas clave que representan el control de tiempo de los cambios en las propiedades. Puede considerar las escalas de tiempo como capas de cambios en las propiedades que se aplican a los objetos en la mesa de trabajo. Las escalas tiempo se incluyen en guiones gráficos.

El trabajo con las escalas de tiempo de animación se desarrolla en el panel Objetos y escala de tiempo. Con los controles disponibles en este panel puede ver la mesa de trabajo según va variando, agregar escalas de tiempo nuevas, modificar escalas de tiempo, etc.

Fotogramas clave

Un fotograma clave es un marcador en la escala de tiempo que indica cuándo se produce un cambio de propiedad. En Expression Blend existen los siguientes cuatro tipos de fotogramas clave:

• Los fotogramas clave a nivel de objeto se aplican a un objeto completo (por ejemplo, un objeto de rectángulo) o a una cuadrícula que contiene varios objetos. A no ser que se establezca manualmente al hacer clic en el botón Registrar fotograma clave, un fotograma clave a nivel de objeto suele indicar que se ha cambiado una propiedad en uno de los objetos secundarios, que podrá ver si expande los nodos del objeto. Por ejemplo, en la imagen anterior (en la sección "¿Cómo funciona la animación en Expression Blend?" anteriormente en este tema), el fotograma clave establecido en la fila de la escala de tiempo correspondiente a Rectángulo es un fotograma clave a nivel de objeto.

• Los fotogramas compuestos indican que la propiedad cuenta con propiedades secundarias que se están animando. Por ejemplo, en la imagen anterior, el fotograma clave establecido en la fila de la escala de tiempo correspondiente a la propiedad Trasladar es un fotograma compuesto. Puede trabajar con fotogramas compuestos para modificar grandes grupos de propiedades a la vez con una sola selección, como cuando mueve fotogramas clave a lo largo de la escala de tiempo.

• Los fotogramas clave simples representan un solo cambio de propiedad en un momento específico. Por ejemplo, en la imagen anterior, los fotogramas clave establecidos en las filas de la escala de tiempo correspondientes a las propiedades X e Y son fotogramas clave simples. Debe trabajar con fotogramas clave simples para realizar algunas acciones, como modificar el número de repeticiones de una animación.

  Para obtener un ejemplo, vea Establecer la duración del bucle.

• Los fotogramas clave implícitos están presentes cuando una animación es interrumpida por otra y la segunda animación no tiene ningún fotograma clave registrado en la marca de 0 segundos. En el momento de la interrupción, Expression Blend anima el cambio entre el último valor conocido de una propiedad y el valor establecido en el primer fotograma clave de la segunda animación. El último valor conocido se considera un fotograma clave implícito, aunque sea el valor entre dos fotogramas clave en la primera animación. Esta transición se denomina comportamiento de la transición y se describe con más detalle en la sección "Usar varias escalas de tiempo de animación superpuestas" a continuación.

Conocer la diferencia entre los fotogramas clave es útil porque no siempre querrá ver los detalles de cada una de las propiedades que se animan. Así pues, puede contraer las propiedades de cada objeto y ver sólo los fotogramas clave a nivel de objeto. Puede trabajar con fotogramas compuestos y fotogramas clave a nivel de objeto para modificar grandes grupos de propiedades a la vez con una sola selección, como cuando mueve fotogramas clave a lo largo de la escala de tiempo.

Para obtener un ejemplo, vea Pegar o mover un fotograma clave.

Debe usar fotogramas clave simples para realizar algunas acciones, como modificar el número de repeticiones de una animación.

Para obtener un ejemplo, vea Establecer la duración del bucle.

Transición entre fotogramas clave

La interpolación de fotogramas clave describe cómo se animan los cambios en las propiedades en el intervalo de tiempo entre dos fotogramas clave.

Puede modificar los valores de interpolación de fotogramas clave mediante la selección de los valores predefinidos Entrada lenta o Salida lenta, modificando un gráfico KeySpline o usando una opción EasingFunction preestablecida que represente a un gráfico KeySpline complejo.

Editor de curva spline clave para la creación de interpolación personalizada entre fotogramas clave

Para obtener más información, vea Cambiar la interpolación entre fotogramas clave de una animación.

Crear escalas de tiempo manualmente o mediante guías de movimiento

[!NOTA]

Las guías de movimiento no se admiten en los proyectos de Microsoft Silverlight.

La creación manual de una escala de tiempo de animación le otorga el máximo control sobre el movimiento y el número de objetos animados por la escala de tiempo. También puede crear animaciones entre colores. Para crear una escala de tiempo de animación manualmente en Expression Blend, haga clic en Nuevo en Objetos y escala de tiempo y, a continuación, registre los fotogramas clave moviendo primero el cabezal de reproducción de la escala de tiempo y modificando después un objeto en la mesa de trabajo para generar un fotograma clave.

Para obtener un ejemplo, vea Crear una animación sencilla.

La generación automática de una escala de tiempo de animación mediante la herramienta Convertir en guía de movimiento permite que un objeto siga un trazado en la mesa de trabajo. Este trazado puede ser una línea o el contorno de una forma (como una elipse o un rectángulo). Tal como se muestra en la imagen siguiente, el contorno de una elipse se convierte en la guía del movimiento para el círculo azul.

Creación de una escala de tiempo de animación mediante una guía de movimiento

	Dos objetos independientes: una elipse y un círculo (creados mediante la herramienta Elipse).
	La elipse se convierte en una guía de movimiento. Tiene la opción de eliminar la elipse en este punto.
	Se genera una escala de tiempo nueva que, cuando se reproduce, mueve el círculo a lo largo del trazado elíptico.

Para obtener un ejemplo de cómo usar las guías de movimiento para generar escalas de tiempo de animación, vea Crear, modificar o eliminar una guía de movimiento.

Las guías de movimiento no se representan en la escala de tiempo mediante fotogramas clave. Por lo tanto, no se pueden modificar los efectos de interpolación. Sin embargo, puede modificar el número de repeticiones.

Para obtener más información, vea Establecer la duración del bucle.

También puede orientar el objeto animado hacia la guía, de modo que el lado del objeto que apunte al centro de la guía continúe haciéndolo a lo largo de la escala de tiempo.

Para obtener más información, vea "Para que el objeto se oriente continuamente hacia la guía" en Crear, modificar o eliminar una guía de movimiento.

Una vez generada la guía de movimiento, puede agregar manualmente animaciones a la misma escala de tiempo que contiene la guía de movimiento.

[!NOTA]

No es posible invertir una guía de movimiento en Expression Blend invirtiendo el guión gráfico que contiene la guía de movimiento. Sin embargo, puede transformar (voltear) la guía para que se proyecte en sentido inverso o usar la propiedad de guión gráfico AutoReverse para que el guión gráfico se reproduzca hacia delante y, a continuación, hacia atrás.

Usar varias escalas de tiempo de animación superpuestas

La estructura de los guiones gráficos en Expression Blend permite tener más de un guión gráfico (y varias escalas de tiempo) en ejecución al mismo tiempo en la aplicación. Por ejemplo, puede dibujar dos círculos que representen una mariposa, crear una escala de tiempo de una animación de la mariposa en una guía de movimiento circular y crear una escala de animación distinta para el movimiento de las alas. La animación del aleteo puede ejecutarse al mismo tiempo que la animación circular sin interrumpirla, ya que las escalas de tiempo no animan las mismas propiedades en el objeto de mariposa.

Para obtener un ejemplo, vea Inténtelo: crear animaciones superpuestas.

Si dos escalas de tiempo de animación animan la misma propiedad a la vez, la transición entre las escalas de tiempo se comporta de forma diferente en función de si el registro del fotograma clave se realiza en la marca de 0 segundos de la segunda animación. Si no registra un fotograma clave en la marca de 0 segundos, Expression Blend asume que desea animar desde el último valor de la propiedad en el momento de la interrupción hasta el valor de la propiedad en el primer fotograma clave de la segunda escala de tiempo. Este efecto se denomina comportamiento de la transición. Por ejemplo, supongamos que, en una escala de tiempo, un círculo se expande al doble de su ancho y en una segunda escala de tiempo se expande a cuatro veces su ancho. Si la escala de tiempo de la segunda animación interrumpe la primera y no tiene ningún fotograma clave en la marca de 0 segundos, la elipse se expande suavemente desde el momento en que se interrumpió la primera escala de tiempo hasta el final de la segunda escala de tiempo (cuatro veces el ancho original). Si la segunda animación no siguiera un comportamiento de la transición (si hubiera un fotograma clave en la marca de 0 segundos), el círculo saltaría bruscamente al punto de inicio de la segunda animación.

Para obtener un ejemplo, vea Inténtelo: reproducir con comportamientos de transición y sin transición.

[!NOTA]

Si dos escalas de tiempo animan la misma propiedad de un objeto, la primera se detendrá cuando sea interrumpida, aunque esté configurada para repetirse indefinidamente.

Velocidades de fotogramas

La animación en Expression Blend se crea estableciendo fotogramas clave a lo largo de una escala de tiempo. La interpolación entre los fotogramas clave se realiza en tiempo de ejecución. Por lo tanto, no es necesario que configure la velocidad de fotogramas de la animación. Cuando ejecute la aplicación, el tiempo de ejecución de .NET Framework representa las escalas de tiempo de animaciones con la velocidad de fotogramas más alta posible.

No obstante, puede especificar los intervalos en la escala de tiempo a los que quiere establecer un fotograma clave. Esta velocidad de intervalo se denomina resolución de ajuste porque hace referencia al ajuste del cabezal de reproducción o de los fotogramas clave . Por ejemplo, si cambió la resolución de ajuste a 10 fotogramas clave por segundo, podrá establecer fotogramas clave a lo largo de la escala de tiempo cada décima parte de un segundo. Para cambiar la resolución de ajuste, haga clic en la flecha desplegable situada junto al botón de alternancia del ajuste en Objetos y escala de tiempo y, a continuación, haga clic en Ajuste para mostrar el cuadro de diálogo Resolución de ajuste.

Escenas

En Expression Blend, puede encapsular animaciones dentro de escenas (o controles de usuario) y, a continuación, usar esas animaciones varias veces en otros documentos de la aplicación. Puede crear un control de usuario en un solo documento o en un archivo .dll (biblioteca de control). Se puede tener acceso a cualquier control de usuario que sea parte de una aplicación desde la categoría Proyecto del panel Activos y, a continuación, se puede incluir en un documento, como cualquier otro control.

[!NOTA]

Después de agregar un control de usuario al proyecto, debe generar el proyecto para que el control de usuario aparezca en el panel Activos. En el menú Proyectos, haga clic en Generar Proyecto.

Cuando planee qué desea animar en un control de usuario, tenga en cuenta lo siguiente:

• El tiempo de las distintas animaciones   Por ejemplo, supongamos que desea crear una aplicación que primero anima una pantalla de presentación y luego anima la interfaz de usuario con una corrección selectiva hacia la vista. Puede poner cada animación en su propio control de usuario, pero deje tiempo suficiente al comienzo de la segunda animación para el intervalo de tiempo que tarda en completarse la animación de la pantalla de presentación.

• Las propiedades y los desencadenadores que desea que estén disponibles para las animaciones   Por ejemplo, supongamos que desea crear una aplicación que contenga un botón y una animación incluida en un control de usuario. No puede agregar un desencadenador al control de usuario para que inicie la escala de tiempo de la animación cuando se haga clic en el botón a menos que el botón forme parte del control de usuario. Además, sólo puede enlazar datos entre valores de propiedades si ambas propiedades se encuentran en el mismo control de usuario.

  [!NOTA]

  Los desencadenadores no están disponibles en los proyectos de Silverlight. Sin embargo, puede usar controles de comportamiento para controlar los guiones gráficos y las transiciones de estado.

  Para obtener más información, vea Agregar controles de comportamiento a objetos.

Si desea más información acerca de los controles de usuario, vea Crear un control de usuario vacío o consulte "Guiones gráficos en controles de usuarios" en Controlar cuándo se ejecuta un guión gráfico.

Probar guiones gráficos

Los guiones gráficos de un proyecto de Expression Blend se pueden probar de varias formas, ya sea dentro del entorno de creación o bien en tiempo de ejecución al compilar la aplicación (haga clic en Ejecutar Proyecto en el menú Proyectos o presione F5). Mientras se encuentre en el entorno de creación, puede usar los controles de reproducción ubicados en el panel Objetos y escala de tiempo.

Controles de reproducción del panel Objetos y escala de tiempo

• Primer fotograma   Envía el cabezal de reproducción al primer fotograma de la animación.

• Fotograma anterior   Envía el cabezal de reproducción al fotograma anterior.

• Reproducir   Reproduce la animación desde el momento actual.

• Fotograma siguiente   Envía el cabezal de reproducción al fotograma siguiente.

• Último fotograma   Envía el cabezal de reproducción al último fotograma de la animación.

Desplazar el cabezal de reproducción de la escala de tiempo

El desplazamiento del cabezal de reproducción de la escala de tiempo es una técnica útil para controlar de forma precisa la velocidad y la posición de la animación que desea ver o probar. El desplazamiento del cabezal de reproducción se consigue mediante el arrastre de dicho cabezal. Al arrastrar el cabezal de reproducción, verá la animación en la mesa de trabajo. Los fotogramas se pueden desplazar de forma normal o a la inversa. La velocidad a la que se reproduce la animación depende de la velocidad con la que se arrastra el cabezal de reproducción.

Para obtener un ejemplo, vea Arrastrar el cabezal de reproducción de la escala de tiempo.

Ajustar el tiempo

El panel Objetos y escala de tiempo contiene controles que le permiten controlar la reproducción de las animaciones y navegar por el tiempo en unidades discretas (fotogramas por segundo) en función de la resolución de ajuste. El ajuste del tiempo se usa cuando navega por el tiempo mediante los controles de reproducción. Cuando hace clic en los botones de fotograma anterior y siguiente, el cabezal de reproducción va hacia atrás o hacia delante de acuerdo con el número de fotogramas por segundo designado. Esta cantidad de tiempo viene determinada por la resolución de ajuste.

Cuadro de diálogo Resolución del ajuste

Para obtener ejemplos acerca de cómo usar la resolución de ajuste, vea Activar o desactivar el ajuste de la escala de tiempo y Cambiar la resolución de ajuste.

[!NOTA]

El ajuste de escala de tiempo no se aplica a la velocidad de fotogramas o a la velocidad de la animación cuando se ejecuta la aplicación. Para obtener más información, vea "Velocidades de fotogramas" más atrás en este tema.

Visualizar el tiempo

La visualización del tiempo actual muestra en MM:SS:xxx (minutos, segundos, milisegundos) el punto en el tiempo seleccionado en ese momento. Para saltar rápidamente a un momento determinado, escriba un valor numérico en este campo para dirigirse directamente a él.

Cuadro de texto Posición del cabezal de reproducción, lectura de 1,450 segundos

Para obtener un ejemplo de cómo usar la visualización del tiempo, vea Ir a un punto específico de una escala de tiempo.

Desencadenadores

Puede usar desencadenadores para cambiar el estado de un objeto en la mesa de trabajo como respuesta a los cambios ocurridos en eventos y propiedades. Puede usar los desencadenadores para iniciar y detener escalas de tiempo de animación. Por ejemplo, cuando crea una escala de tiempo, se crea un desencadenador predeterminado que ejecutará la escala de tiempo cuando la aplicación se cargue por primera vez. Puede modificar este desencadenador o crear otros desencadenadores para ejecutar la escala de tiempo cuando el usuario hace clic en un botón o realiza otra acción.

Para obtener información detallada acerca de los desencadenadores, vea Usar desencadenadores para definir el comportamiento de un control WPF.

[!NOTA]

Los desencadenadores no están disponibles en los proyectos de Silverlight. Sin embargo, puede usar controles de comportamiento para controlar los guiones gráficos y las transiciones de estado.

Para obtener más información, vea Agregar controles de comportamiento a objetos.

Controladores de eventos

Los controladores de eventos son métodos que el usuario programa para que se ejecuten cuando se produce un evento específico (como un evento MouseOver). Puede usar un controlador de eventos en lugar de un desencadenador si necesita hacer algo más que establecer una propiedad o controlar una escala de tiempo de animación cuando se produce un evento en la aplicación. Los métodos de control de eventos permiten agregar otra lógica de programación, como establecer una propiedad en otro objeto, cargar un documento nuevo, crear un objeto nuevo, usar un cálculo matemático para animar un objeto, etc. Por ejemplo, si deseara determinar qué tecla se presiona durante el evento KeyDown, tendría que crear un método de control de eventos al que se llamara cuando se presionara una tecla y tendría que agregar código para determinar qué tecla ha sido.

Los métodos de control de eventos se definen en el archivo de código subyacente del documento. En un proyecto de WPF o Silverlight, los archivos de código subyacente se escriben en Microsoft Visual C# o Microsoft Visual Basic .NET.

Para obtener ejemplos, vea Controlar elementos multimedia con los desencadenadores en una escala de tiempo y Inténtelo: cargar una nueva página dinámicamente en la aplicación de Silverlight.

Animación con código

Cuando trabaje en la vista de diseño de Expression Blend, puede crear escalas de tiempo de animación completas sin tener que modificar el XAML ni el código del archivo de código subyacente. También puede configurar desencadenadores que puedan iniciar, detener y pausar escalas de tiempo de animación basados en interacciones del usuario. Podrá realizar todo el trabajo de animación que desee en la vista de diseño de Expression Blend.

Existen algunos escenarios de animación avanzados que requieren código (en C# o Visual Basic .NET), como el uso de cálculos matemáticos para determinar el movimiento de un objeto. Si planea manipular escalas de tiempo de animación en archivos de código subyacente, es útil entender el modelo de animación de la tecnología que usa su aplicación (WPF o Silverlight).

Las escalas de tiempo de animación se representan en XAML por medio de un elemento STORYBOARD. Por ejemplo, cuando cree una escala de tiempo de animación en la vista de diseño de Expression Blend, se generará para la animación código XAML que puede parecerse al siguiente:

<Window.Resources>
  <Storyboard x:Key="MoveRight">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="rectangle"
        Storyboard.TargetProperty="...(TranslateTransform.Y)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>

Los atributos del ejemplo de XAML anterior son los siguientes:

• El atributo x:Key especifica el nombre de la escala de tiempo (o guión gráfico).

• El atributo BeginTime especifica el tiempo de inicio de la animación (en la marca de 0 segundos en este caso).

• El atributo TargetName especifica el nombre del elemento que el guión gráfico (o escala de tiempo) anima (un objeto llamado "rectángulo" en este caso).

• El atributo TargetProperty especifica la propiedad que cambiará (la propiedad de la posición Y del rectángulo en este caso).

• Los atributos KeyTime especifican en qué intervalos de tiempo cambia la propiedad de destino y a qué valor. En la vista de diseño de Expression Blend, estos elementos se representan por medio de fotogramas clave en la escala de tiempo.

Puede controlar las escalas de tiempo de animación mediante programación en archivos de código subyacente usando C# o Visual Basic .NET. Por ejemplo, para iniciar la escala de tiempo de animación anterior en un archivo de código subyacente, el código C# podría ser similar al siguiente:

Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

Para obtener más información acerca de cómo crear y manipular escalas de tiempo de animación en XAML y archivos de código subyacente, vea el tema Animación y temporización en la sección Windows Presentation Foundation de MSDN, o vea los ejemplos y tutoriales que encontrará en el sitio web de Microsoft Expression (puede estar en inglés).