Inténtelo: reproducir con comportamientos de transición y sin transición

Si varias escalas de tiempo de animación animan la misma propiedad al mismo tiempo, el comportamiento de la transición será diferente en función de si se ha grabado o no un fotograma clave en la marca de 0 segundos. El siguiente procedimiento le ayudará a comprender cómo funcionan los comportamientos de la transición y sin transición.

Para comparar comportamientos de la transición y sin transición

1. En Microsoft Expression Blend, abra o cree un nuevo proyecto. Para obtener más información, vea Crear un nuevo documento o proyecto.

2. Presione F6 para cambiar al Área de trabajo de animación. (F6 cambiará entre el Área de trabajo de diseño y el Área de trabajo de animación. En el Área de trabajo de animación, el panel Interacción se encuentra debajo de la mesa de trabajo.)

3. Seleccione el botón Cerrar guión gráfico  en Objetos y escala de tiempo.

   Sugerencia:
   Si hay un guión gráfico abierto, cualquier cambio de propiedad que se realice grabará automáticamente un fotograma clave en la escala de tiempo del guión gráfico.

4. Seleccione la herramienta Elipse en el Cuadro de herramientas. Dibuje un círculo en el centro de la mesa de trabajo. Puede usar las propiedades Alto y Ancho en la categoría Diseño del panel Propiedades para que la elipse sea un círculo perfecto. Si observa que se produce un recorte, ajuste las propiedades de Margen.

5. En Objetos y escala de tiempo, haga clic en el botón Nuevo .

   Aparece el cuadro de diálogo Crear recurso Storyboard.

6. En el campo Nombre de recurso (clave), escriba el nombre Double y, a continuación, haga clic en Aceptar.

   Expression Blend cambia al modo de grabación de 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.

7. No establezca el fotograma clave en la marca de 0 segundos. En su lugar, arrastre el cabezal de reproducción a la marca de 1 segundo.

8. Elija la herramienta Selección en el Cuadro de herramientas, mantenga presionada la tecla Alt y arrastre el manipulador de ancho de la elipse hasta que el valor de ancho sea el doble del original.

   Se establecerá automáticamente un fotograma clave en la marca de 1 segundo para la propiedad ScaleX.

   Sugerencia:
   Cuando se mantiene presionada la tecla Alt durante el cambio de tamaño de un objeto en la mesa de trabajo, su punto central no cambia de posición.

9. En Objetos y escala de tiempo, expanda los nodos que hay bajo la elipse hasta que vea el nodo ScaleX. Haga clic con el botón secundario en el nodo ScaleX o en la barra gris de intervalo de tiempo y, a continuación, haga clic en Editar número de repeticiones.

   Aparece el cuadro de diálogo Editar repeticiones.

10. Para que la escala de tiempo se repita indefinidamente, haga clic en el botón Establecerpara siempre y, a continuación, haga clic en Aceptar.

11. En Objetos y escala de tiempo, haga clic en el botón Nuevo .

    Aparece el cuadro de diálogo Crear recurso Storyboard.

12. En el campo Nombre derecurso (clave), escriba el nombre Quadruple y, a continuación, haga clic en Aceptar.

    Expression Blend cambia al modo de grabación para la segunda escala de tiempo y empieza por el tamaño original de la elipse.

13. Al igual que antes, no establezca ningún fotograma clave en la marca de 0 segundos. En su lugar, arrastre el cabezal de reproducción a la marca de 1 segundo.

14. Elija la herramienta Selección en el Cuadro de herramientas, mantenga presionada la tecla Alt y arrastre el manipulador de ancho de la elipse hasta que el valor de ancho sea cuatro veces el original.

    Se establecerá automáticamente un fotograma clave en la marca de 1 segundo para la propiedad ScaleX.

15. Haga clic con el botón secundario en el nodo ScaleX o en la barra gris de intervalo de tiempo, haga clic en Editar número de repeticiones, haga clic en el botón Establecer para siempre y, a continuación, haga clic en Aceptar.

16. En este momento, puede establecer los desencadenadores de las animaciones. De manera predeterminada, cualquier escala de tiempo nueva creada en la raíz del documento hará que se agregue un desencadenador de eventos en Desencadenadores para el evento Window.Loaded. Puede mantener este desencadenador para la escala de tiempo Double y agregar uno nuevo para la escala de tiempo Quadruple.

17. 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 situado junto a Quadruple.Begin para eliminar dicha acción. La animación Double comenzará cuando se inicie la aplicación, pero la animación Quadruple no.

    Sugerencia:
    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.

18. Para agregar el desencadenador de la animación Quadruple, haga clic en el botón Agregar desencadenador de evento en Desencadenadores.

    Se crea un nuevo desencadenador Window.Loaded.

19. Seleccione la elipse en Objetos y escala de tiempo y, en Desencadenadores, use los cuadros desplegables para cambiar el nuevo desencadenador de Cuando se origina Window.Loaded a Cuando se origina ellipse.MouseEnter.

20. Haga clic en el botón Agregar nueva acción situado junto a Cuando se origina ellipse.MouseEnter y use los cuadros desplegables para cambiar la nueva acción a Quadruple.Begin.

    Ahora, cuando el usuario mueva el cursor del mouse sobre la elipse, la animación Quadruple interrumpirá la animación Double.

21. Agregue un nuevo desencadenador de eventos, cámbielo a Cuando se origina ellipse.MouseLeave y agregue una nueva acción para Double.Begin.

    Cuando el usuario mueva el cursor del mouse fuera de la elipse, la animación Double interrumpirá la animación Quadruple.

22. Para ver el comportamiento de las escalas de tiempo de animación y del desencadenador de eventos que acaba de crear, puede probar la escena si hace clic en Probar Proyecto, en el menú Proyecto.

    No hay ningún fotograma clave establecido en la marca de 0 segundos para ninguna de las animaciones. La transición entre animaciones resultante se denomina comportamiento de la transición. Cuando se interrumpe una animación con la otra, el comportamiento de la transición es una suave transición desde el ancho en el momento de la interrupción hasta el primer fotograma clave de la animación siguiente. Si se mueve el cursor del mouse dentro de la elipse cuando ésta se encuentra al final de la animación Double, el punto inicial de la animación Quadruple no será desde el tamaño original de la elipse, sino que la animación Quadruple se iniciará desde el ancho de la elipse cuando se mueva el mouse. Al mover el mouse fuera de la elipse, la animación Double parece que es inversa a la animación Quadruple debido a la transición que se produce entre las dos.

23. Salga de la aplicación para volver a Expression Blend.

24. En Objetos y escala de tiempo, seleccione el nodo ScaleX de la elipse, seleccione la escala de tiempo Quadruple, mueva el cabezal de reproducción a la marca de 0 segundos y, a continuación, haga clic en el botón Registrar fotograma clave.

25. Vuelva a probar la animación. El comportamiento de la transición ha cambiado. Al mover el mouse dentro de la elipse, la animación Quadruple se inicia desde el ancho original de la elipse.

    Puede examinar un comportamiento de la transición distinto; para ello, agregue un fotograma clave en la marca de 0 segundos de la animación Double y vuelva a probarlo; a continuación, elimine el fotograma clave de la marca de 0 segundos de la animación Quadruple y vuelva a probarlo.