Información general sobre animación e interactividad

Una animación es una ilusión creada por un ciclo rápido a través de una serie de imágenes, cada una de las cuales es ligeramente diferente a la anterior. El cerebro percibe el grupo de imágenes como una sola escena que va cambiando. En el cine, esta ilusión se crea mediante cámaras que graban un gran número de fotografías o fotogramas cada segundo. Cuando un proyector reproduce estos fotogramas, los espectadores ven una imagen en movimiento.

Fotogramas reproducidos por un proyector

La animación en PC es similar. Por ejemplo, un programa que le ayude a crear una animación de un rectángulo que se mueve de izquierda a derecha podría funcionar de la forma siguiente:

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

En Microsoft® Expression Blend™, las animaciones se basan en fotogramas clave. Para crear una animación en Expression Blend, debe establecer fotogramas clave en una escala de tiempo para marcar los cambios de propiedades. Por ejemplo, establezca un fotograma clave en la marca de 0 segundos para grabar la posición de un rectángulo en la parte izquierda del área de diseño y, a continuación, establezca un fotograma clave en la marca de 1 segundo para grabar la posición del mismo rectángulo en la parte derecha del área de diseño. La animación resultante estará basada en la transformación que ocurre en las propiedades X e Y del rectángulo durante 1 segundo. Cuando ejecute una escala de tiempo de la animación, Expression Blend interpolará los cambios en las propiedades a lo largo del tiempo designado y mostrará los resultados en la aplicación. Puede animar de esta forma cualquier propiedad de un objeto en el área de diseño, incluso las propiedades no visuales.

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

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

En algunos programas de animación informáticos, 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 este motivo, 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 a lo largo de toda la escala de tiempo, pero 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 objetos nuevos durante una escala de tiempo de animación en Expression Blend, puede generar objetos nuevos y escalas de tiempo de animación nuevas mediante programación en archivos de código subyacente. Para obtener más información, vea los temas sobre animación y temporización en la sección de Windows Presentation Foundation de MSDN (en inglés).

Escalas de tiempo

Las escalas de tiempo proporcionan una estructura para las secuencias de animación en la aplicación que cree. Una animación en Expression Blend está formada por una escala de tiempo en la que se registran fotogramas clave que representan el control del tiempo de cambios en las propiedades. Las escalas de tiempo pueden considerarse como capas de los cambios en las propiedades que se aplican a los objetos en el área de diseño.

Las escalas de tiempo de animación se crean en le sección Objetos y escala de tiempo del panel Interacción (para obtener un esquema, vea Panel Interacción). Con los controles disponibles en este panel puede ver el área de diseño según va variando, agregar escalas de tiempo nuevas, modificar escalas de tiempo, etc.

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

Las escalas de tiempo se pueden controlar (iniciar, detener, pausar) mediante desencadenadores establecidos en los objetos. Para obtener más información, vea Desencadenadores más adelante.

Fotogramas clave

Un fotograma clave Fotograma clave es un marcador en la escala de tiempo que indica un cambio en una propiedad. Hay cuatro tipos de fotogramas clave en Expression Blend:

Conocer esta diferenciación entre fotogramas clave es útil porque no siempre es necesario ver los detalles de cada una de las propiedades que se animan. En su lugar, puede contraer las propiedades de cada objeto y ver únicamente los fotogramas clave de nivel de objeto. Puede trabajar con fotogramas clave de nivel de objeto y compuestos para modificar grandes grupos de propiedades a la vez con una sola selección; por ejemplo, cuando mueve fotogramas clave a lo largo de la escala de tiempo. Para obtener un ejemplo, vea Mover un fotograma clave. Sólo necesita trabajar con fotogramas clave sencillos para realizar algunas acciones, como editar el número de repeticiones de una animación. Para ver un ejemplo, vea Establecer la duración del bucle.

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. Pueden asignarse métodos de interpolación múltiples a un intervalo de tiempo para crear cambios de valor más complejos:

Puede modificar los valores de la interpolación entre fotogramas clave si hace clic con el botón secundario en un fotograma clave en la escala de tiempo. Para obtener un ejemplo, vea Cambiar la interpolación entre fotogramas clave de una animación.

Crear escalas de tiempo manualmente o mediante trazados del movimiento

La creación manual de una escala de tiempo de animación le otorga el mayor de los controles sobre el movimiento y el número de objetos animados en la escala de tiempo. También puede crear animaciones entre colores. Para crear manualmente una escala de tiempo de animación en Expression Blend, haga clic en el botón Crear escala de tiempo nueva Botón Crear escala de tiempo nueva, en Objetos y escala de tiempo, y, a continuación, grabe los fotogramas clave moviendo primero el cabezal de reproducción de la escala de tiempo Cabezal de reproducción de la escala de tiempo y, luego, modificando un objeto en el área de diseño 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 trazado del movimiento permite que un objeto siga un trazado en el área de diseño. 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 el trazado del movimiento para el círculo azul.

Anatomía de un trazado del movimiento

1 Dos objetos independientes: una elipse y un círculo (creados con la herramienta Elipse).
2 La elipse se convierte en un trazado del movimiento. Tiene la opción de eliminar la elipse en este punto.
3 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, vea Crear un trazado del movimiento. Los trazados del movimientos no están representados en la escala de tiempo por fotogramas clave, por lo que no puede modificar los efectos de interpolación. Sin embargo, puede editar el número de repeticiones (vea Establecer la duración del bucle). Una vez generado el trazado del movimiento, puede agregar manualmente animaciones a la misma escala de tiempo que contiene el trazado del movimiento.

Usar varias escalas de tiempo de animación superpuestas

La estructura de la escala de tiempo en Expression Blend le permite ejecutar más de una animació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 un trazado de movimiento circular y crear una escala de animación separada para el aleteo 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 Crear animaciones superpuestas.

Si dos escalas de tiempo de animación animan la misma propiedad al mismo tiempo, la transición entre las escalas de tiempo se comporta de forma diferente dependiendo de si la grabación del fotograma clave se realiza en la marca de 0 segundos de la segunda animación. Si no graba 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 tipo de transición se denomina animación de continuació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 fuera una animación de continuació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 Experimentar con animaciones de continuación.

Sugerencia 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

Como la animación en Expression Blend se crea estableciendo fotogramas clave a lo largo de una escala de tiempo y la interpolación entre fotogramas clave se realiza en tiempo de ejecución, no hay necesidad de configurar la velocidad de fotogramas. 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 del ajuste porque se refiere al lugar en la escala de tiempo en que el cabezal de reproducción Cabezal de reproducción de la escala de tiempo y los fotogramas clave Fotograma clave se pueden ajustar. Por ejemplo, si cambió la resolución del 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 del ajuste, haga clic en la flecha de lista desplegable junto al botón de alternancia del ajuste Botón de ajuste de la escala de tiempo situado bajo Objetos y escala de tiempo y, a continuación, haga clic en Ajuste... para que aparezca el cuadro de diálogo Resolución del 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 una .dll (biblioteca de control). Se puede tener acceso a cualquier control de usuario que sea parte de una aplicación desde la ficha Controles personalizados del Panel biblioteca Botón Panel biblioteca y, a continuación, se puede incluir en un documento, como cualquier otro control.

Nota Tras agregar un control de usuario al proyecto, debe generar el proyecto para que el control de usuario se muestre en el Panel biblioteca. En el menú Proyecto, haga clic en Generar proyecto.

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

Para obtener un ejemplo, vea Crear un control de usuario.

Desencadenadores

Los desencadenadores se pueden usar para cambiar el estado de un objeto en el área de diseño como respuesta a eventos o cambios en las propiedades. Puede usar los desencadenadores para iniciar y detener escalas de tiempo de animación. Por ejemplo, cuando cree una escala de tiempo, se creará 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 que ejecuten la escala de tiempo cuando se hace clic en un botón o cuando el usuario realiza alguna otra acción. Para obtener más información acerca de los desencadenadores, vea Aspectos básicos de los desencadenadores.

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 le 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 la tecla presionada 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 están definidos en el archivo de código subyacente del documento y están escritos en C# o en Microsoft® Visual Basic® .NET. Para obtener más información, vea el tema Control de eventos. Para obtener un ejemplo, vea Crear un nuevo método de control de eventos.

Animación con código

Cuando trabaje en la vista Diseño de Expression Blend, puede crear escalas de tiempo de animación completas sin tener que modificar el XAML ni el código en el 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 con animaciones que desee en la vista Diseño de Expression Blend.

Existen algunas situaciones de animación avanzadas 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 en Windows Presentation Foundation (WPF), ya que una animación que cree de forma visual en Expression Blend es, esencialmente, una aplicación de WPF.

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 Diseño de Expression Blend, se generará para la animación código XAML que puede ser similar 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:

Puede controlar las escalas de tiempo de animación mediante programación en archivos de código subyacente utilizando C# o Visual Basic .NET. Por ejemplo, para iniciar la escala de tiempo de la 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 los temas sobre animación y tiempo en la sección de Windows Presentation Foundation de MSDN o vea los ejemplos y tutoriales que encontrará en el sitio Web de Microsoft Expression (en inglés).