Crear animaciones superpuestas

La estructura de la escala de tiempo en Expression Blend le permite ejecutar más de una escala de tiempo de animación al mismo tiempo en la aplicación. El procedimiento siguiente muestra cómo crear una animación de una mariposa que se mueve continuamente en un círculo, pero que agita las alas cuando el usuario pasa el mouse por encima de ella.

En Microsoft® Expression Blend™, abra o cree un proyecto nuevo. Para obtener más información, vea Crear un nuevo documento o proyecto.
Presione F7 para cambiar al Área de trabajo de animación.

Seleccione la escala de tiempo Valor predeterminado en la lista desplegable de Objetos y escala de tiempo.

Siempre que seleccione una escala de tiempo diferente a Valor predeterminado, se grabará automáticamente un fotograma clave en la escala de tiempo cada vez que realice cualquier cambio en las propiedades.

Seleccione la herramienta Elipse en el cuadro de herramientas. Dibuje dos círculos pequeños en la parte derecha del área de diseño. Puede hacer que las propiedades Height y Width tengan el mismo valor en la categoría Diseño del panel Propiedades para que las elipses sean círculos perfectos. Si observa que se recortan, ajuste las propiedades de Margin.
Elija la herramienta Selección en el cuadro de herramientas y acerque los dos círculos, como se muestra en la siguiente imagen:

Dos círculos dibujados en el área de diseño
Para trabajar con ambos círculos al mismo tiempo, seleccione un círculo en Objetos y escala de tiempo, mantenga presionada la tecla Ctrl para poder seleccionar también el otro círculo, haga clic con el botón secundario en los círculos, seleccione Agrupar en y, a continuación, haga clic en Grid.
Se abre un nuevo panel de cuadrícula en Objetos y escala de tiempo que contiene los dos círculos.
Para cambiar el nombre de la cuadrícula, haga clic sobre ella con el botón secundario y elija Cambiar nombre. Cambie el nombre a Butterfly.
Para crear la animación circular, use la herramienta Convertir en trazado del movimiento para generar una escala de tiempo de animación a partir de un trazado. Dibuje una tercera elipse en el centro del área de diseño cuyo ancho sea aproximadamente la mitad de la superficie del área de diseño.
Con la nueva elipse seleccionada en Objetos y escala de tiempo, seleccione Trazado en el menú Objeto y haga clic en Convertir en trazado del movimiento.
Aparecerá el cuadro de diálogo Seleccionar destino para trazado del movimiento.
Seleccione la cuadrícula Butterfly en la lista de objetos que se encuentran en el área de diseño y haga clic en Aceptar.
Se creará una nueva escala de tiempo. Expression Blend entrará en el modo de grabación de la nueva escala de tiempo; haga clic en el botón Reproducir para ver la animación en el área de diseño. El destino (la mariposa) se mueve recorriendo el trazado del movimiento que se generó a partir de la elipse. Observe que si la propiedad Fill de la elipse está establecida en un pincel, cubrirá parte del objeto Butterfly.
La tercera elipse ya no es necesaria, por lo que puede eliminarla.
En Objetos y escala de tiempo, expanda los nodos de los elementos Butterfly, RenderTransform y Translation para ver el intervalo de tiempo de Trazado del movimiento. Haga clic con el botón secundario en el elemento Trazado del movimiento o en la barra gris que representa el intervalo de tiempo y, a continuación, haga clic en Editar número de repeticiones.
Aparecerá el cuadro de diálogo Editar repeticiones.
Para que la escala de tiempo se repita constantemente, haga clic en el botón Establecer para siempre y después en Aceptar.
Cuando se ejecute esta animación, se repetirá indefinidamente.
En Objetos y escala de tiempo, haga clic en el botón Crear escala de tiempo nueva .
Aparecerá el cuadro de diálogo Crear recurso Storyboard.
En el campo Nombre de recurso (clave), escriba el nombre Flap y haga clic en Aceptar.
Expression Blend entra en el modo de grabación de la nueva escala de tiempo con el cabezal de reproducción en la marca de 0 segundos. Mientras esté en el modo de grabación, cualquier propiedad que se configure grabará automáticamente un fotograma clave en la escala de tiempo.
Para establecer un fotograma clave en la posición de 0 segundos, seleccione la cuadrícula Butterfly y haga clic en el botón Grabación de fotograma clave .
Aparecerá un fotograma clave en la escala de tiempo de la fila correspondiente a la cuadrícula Butterfly.
Arrastre el cabezal de reproducción hasta la marca de 1 segundo y grabe otro fotograma clave.
De este modo, se definen las posiciones inicial y final de la animación.
Arrastre el cabezal de reproducción hasta la marca de 0,5 segundos, entre los dos fotogramas clave anteriores.
Elija la herramienta Selección del cuadro de herramientas, mantenga presionada la tecla Alt y, en el área de diseño, expanda el alto y comprima el ancho de la cuadrícula Butterfly hasta que adquiera el aspecto que se muestra en la siguiente imagen.
Como Expression Blend se encuentra en el modo de grabación de la escala de tiempo de la animación Flap, la acción de modificar la cuadrícula establece nuevos fotogramas clave en la marca de 0,5 segundos para las propiedades ScaleX y ScaleY de la cuadrícula.

Expandir la cuadrícula de círculos en el área de diseño
En Objetos y escala de tiempo, expanda los nodos de la cuadrícula Butterfly hasta que vea los nodos ScaleX y ScaleY. Seleccione uno de los nodos, haga clic sobre él con el botón secundario, seleccione Editar número de repeticiones, en el cuadro de diálogo Editar repeticiones, escriba 2 para que la escala de tiempo se ejecute dos veces y, por último, haga clic en Aceptar. A continuación, repita esta operación con el otro nodo.

Haga clic en el botón Reproducir para probar la animación en el área de diseño. Tenga en cuenta que el valor de la repetición no formará parte de la reproducción en el área de diseño. Si desea ajustar la duración de la animación, mueva los fotogramas clave en la barra de intervalo de tiempo gris.

Si no hay espacio suficiente para ver toda la escala de tiempo, use el cuadro de texto Zoom de escala de tiempo para alejar la escala de tiempo. También puede cambiar el ancho de los paneles para ver mejor el panel Objetos y escala de tiempo.

En este momento, puede establecer los desencadenadores de las animaciones. Cualquier escala de tiempo nueva creada en la raíz del documento hará que se agregue un desencadenador de eventos predeterminado en Desencadenadores para el evento Window.Loaded que se produce al iniciar la aplicación. Puede mantener este desencadenador para la escala de tiempo circular y agregar uno nuevo para la escala de tiempo Flap.

En Desencadenadores, seleccione el desencadenador Window.Loaded. Las acciones del desencadenador se muestran debajo de Cuando se origina Window.Loaded. Haga clic en el signo menos que hay al lado de Flap.Begin para eliminar esa acción.
De este modo, la animación circular seguirá iniciándose cuando arranque la aplicación, pero la animación Flap no se iniciará.

Es posible que tenga que ajustar el tamaño del panel Desencadenadores para ver la sección Propiedades cuando está activo. Para ajustar el tamaño, haga clic y arrastre los bordes del panel y el borde interior dentro del panel.

Eliminar la animación Flap del desencadenador Window.Loaded

Para agregar el desencadenador de la animación Flap, haga clic en el botón Agregar desencadenador de evento en Desencadenadores.
Se crea un nuevo desencadenador Window.Loaded.
Seleccione el elemento de cuadrícula Butterfly en Objetos y escala de tiempo y, a continuación, en Desencadenadores use los cuadros desplegables para cambiar el nuevo desencadenador de Cuando se origina Window.Loaded a Cuando se origina Butterfly.MouseEnter.
Haga clic en el botón Agregar nueva acción que hay al lado de Cuando se origina Butterfly.MouseEnter y, a continuación, use los cuadros desplegables para cambiar la nueva acción a Flap.Begin.
Ahora, cuando el usuario mueva el cursor del mouse sobre la mariposa, comenzará la escala de tiempo de la animación Flap.

Crear un nuevo desencadenador para el evento MouseEnter de la cuadrícula

Para ver el comportamiento de las escalas de tiempo de animaciones y del desencadenador de eventos que acaba de crear, pruebe la escena haciendo clic en Probar Proyecto, en el menú Proyecto.

Si la animación circular se ejecuta demasiado rápido, puede ajustar el tiempo de ejecución de la escala de tiempo. En Objetos y escala de tiempo, seleccione la escala de tiempo del trazado del movimiento en el cuadro desplegable, expanda los nodos de la cuadrícula hasta que vea el nodo Trazado del movimiento, seleccione el extremo derecho de la barra gris de intervalo de tiempo y arrástrelo hacia la derecha para ampliar el tiempo de finalización.
Otra opción sería eliminar la escala de tiempo circular, crear una nueva escala de tiempo y comenzar en el paso 8 (dibujar una elipse) para crear el trazado del movimiento. (Si no crea una escala de tiempo nueva antes de comenzar en el paso 8, la animación circular se agregará a la escala de tiempo de la animación Flap.)