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 Blend para Visual Studio, abra o cree un nuevo proyecto. Para obtener más información, vea Crear un proyecto nuevo en Blend.

2. Presione F6 para cambiar al área de trabajo Animación. Presione F6 para cambiar entre las áreas de trabajo disponibles. En el área de trabajo Animación, el panel Objetos y escala de tiempo se encuentra debajo de la mesa de trabajo.

3. Seleccione Cerrar guion gráfico  en el panel Objetos y escala de tiempo.

   Sugerencia

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

4. Seleccione la herramienta Elipse  en el panel 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 recortan, ajuste las propiedades Margin.

5. En el panel Objetos y escala de tiempo, haga clic en 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.

   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 panel 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 el panel 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 constantemente, haga clic en Establecer para siempre y, a continuación, haga clic en Aceptar.

11. En el panel Objetos y escala de tiempo, haga clic en Nuevo .

    Aparece el cuadro de diálogo Crear recurso Storyboard.

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

    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 panel 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 evento en el panel 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 el panel Desencadenadores, seleccione el desencadenador Window.Loaded. Las acciones del desencadenador se muestran debajo de Cuando se genera Window.Loaded. Haga clic en el signo menos junto a Quadruple.Begin para eliminar esa acción.

    De este modo, la animación Double seguirá iniciándose cuando arranque la aplicación, pero la animación Quadruple no se iniciará.

    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 Agregar desencadenador de evento en el panel Desencadenadores.

    Se crea un nuevo desencadenador Window.Loaded.

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

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

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

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

    Cuando el usuario mueva el puntero 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 Proyecto de prueba 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 puntero dentro de la elipse cuando esta 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 Blend.

24. En el panel 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.