Experimentar con animaciones de continuación

Si varias escalas de tiempo de animación ejecutan la animación de la misma propiedad al mismo tiempo, el comportamiento de continuación será diferente dependiendo de que se haya grabado o no un fotograma clave en la marca de 0 segundos. El siguiente procedimiento le ayudará a comprender cómo funcionan las animaciones de continuación.

  1. En Microsoft® Expression Blend™, abra o cree un proyecto nuevo. Para obtener más información, vea Crear un nuevo documento o proyecto.
  2. Presione F7 para cambiar al Área de trabajo de animación.
  3. Seleccione la escala de tiempo Valor predeterminado en la lista desplegable de Objetos y escala de tiempo.
    Sugerencia 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.
  4. Seleccione la herramienta Elipse Herramienta Elipse en el cuadro de herramientas. Dibuje un círculo en el centro del área de diseño. Puede usar las propiedades Height y Width 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 de Margin.
  5. En Objetos y escala de tiempo, haga clic en el botón Crear escala de tiempo nueva Botón Nueva escala de tiempo.
    Aparecerá el cuadro de diálogo Crear recurso Storyboard.
  6. En el campo Nombre de recurso (clave), escriba el nombre Double y haga clic en Aceptar.
    Expression Blend entra en el modo de grabación de escala de tiempo con el cabezal de reproducción Cabezal de reproducción de la escala de tiempo 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 un fotograma clave en la marca de 0 segundos. En lugar de eso, arrastre el cabezal de reproducción hasta la marca de 1 segundo.
  8. Elija la herramienta Selección 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 el área de diseño, 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 del intervalo de tiempo y, a continuación, haga clic en Editar número de repeticiones.
    Aparecerá el cuadro de diálogo Editar repeticiones.
  10.  Para que la escala de tiempo se repita constantemente, haga clic en el botón Establecer para siempre Botón Establecer para siempre y después en Aceptar.
  11. En Objetos y escala de tiempo, haga clic en el botón Crear escala de tiempo nueva Botón Nueva escala de tiempo.
    Aparecerá el cuadro de diálogo Crear recurso Storyboard.
  12. En el campo Nombre de recurso (clave), escriba el nombre Quadruple y haga clic en Aceptar.
    Expression Blend entra en el modo de grabación para la segunda escala de tiempo, comenzando con 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 lugar de eso, arrastre el cabezal de reproducción hasta 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 de la misma sea cuatro veces el valor del 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, a continuación, en el botón Establecer para siempre y, por último, 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 que hay al lado de 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 el botón Agregar desencadenador de evento 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, a continuación, 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 Botón Agregar nueva acción que hay al lado de Cuando se origina ellipse.MouseEnter y, a continuación, 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 animaciones y del desencadenador de eventos que acaba de crear, pruebe la escena haciendo 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. Cuando se interrumpe una animación con la otra, el comportamiento de continuación de la animació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 hasta la marca de 0 segundos y haga clic en el botón Grabación de fotograma clave.
  25. Vuelva a probar la animación.
    El comportamiento de continuación ha cambiado. Cuando mueva el mouse dentro de la elipse, la animación Quadruple se iniciará desde el ancho original de la elipse.
    Puede seguir examinando comportamientos de continuación distintos; 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.