Home > Animation and interactivity > Playing with handoff animations

Playing with handoff animations

If multiple animation timelines animate the same property at the same time, the handoff behavior is different depending on whether there is a keyframe recorded at the 0 second mark. The following procedure helps you to understand how handoff animations work.

1. In Microsoft® Expression Blend™, open or create a new project. For more information, see Create a new document or project.
2. Press F7 to switch to the Animation Workspace.
3. Select the Default timeline from the drop-down box under Objects and Timeline.
   

   Whenever a timeline other than the Default timeline is selected, any property change that you make will automatically record a keyframe on the timeline.

4. Select the Ellipse tool from the Toolbox. Draw a circle in the middle of the artboard. You can use the Height and Width properties under the Layout category of the Properties panel to make the ellipse a perfect circle. If you see clipping behavior, then adjust the Margin properties.
5. Under Objects and Timeline, click the Create new timeline button .
   The Create Storyboard Resource dialog appears.
6. In the Resource name (Key) field, enter the name Double, and then click OK.
   Expression Blend enters timeline recording mode with the play head at the 0 second mark. While in recording mode, any property that you set will automatically record a keyframe on the timeline.
7. Do not set a keyframe at the 0 second mark. Instead, drag the play head to the 1 second mark.
8. Choose the Selection tool from the Toolbox, hold the ALT key, and drag the width handle of the ellipse until the ellipse is twice its original width.
   A keyframe is automatically set at the 1 second mark for the ScaleX property.

   Holding the ALT key while you resize an object on the artboard maintains the center point.

9. Under Objects and Timeline nodes, expand the nodes under the ellipse until you see the ScaleX node. Right-click the ScaleX node or the grey time span bar, and then click Edit Repeat Count.
   The Edit Repeat dialog appears.
10. To make the timeline repeat forever, click the Set to forever button, and then click OK.
11. Under Objects and Timeline, click the Create new timeline button .
    The Create Storyboard Resource dialog appears.
12. In the Resource name (Key) field, enter the name Quadruple, and then click OK.
    Expression Blend enters timeline recording mode for the second timeline, starting from the original ellipse size.
13. As you did previously, do not set a keyframe at the 0 second mark. Instead, drag the play head to the 1 second mark.
14. Choose the Selection tool from the Toolbox, hold the ALT key, and drag the width handle of the ellipse until the ellipse is four times its original width.
    A keyframe is automatically set at the 1 second mark for the ScaleX property.
15. Right-click the ScaleX node or the grey time span bar, click Edit Repeat Count, click the Set to forever button, and then click OK.
16. You can now set up triggers for your animations. By default, any new timeline created in the root of your document will cause an event trigger to be added under Triggers for the Window.Loaded event. You can keep that trigger for the Double timeline, and add a new one for the Quadruple timeline.
17. Under Triggers, select the Window.Loaded trigger. The actions for the trigger are displayed under When Window.Loaded is raised. Click the minus sign next to Quadruple.Begin to delete that action.
    Now, the Double animation will still begin when the application starts, but the Quadruple animation will not.

    You might have to adjust the size of the Triggers pane to see the Properties when active section. To adjust the size, click and drag the borders of the pane and the border within the pane.

18. To add the trigger for the Quadruple animation, click the Add event trigger button under Triggers.
    A new Window.Loaded trigger is created.
19. Select the ellipse under Objects and Timeline, and then under Triggers, use the drop-down boxes to change the new trigger from When Window.Loaded is raised to When ellipse.MouseEnter is raised.
20. Click the Add new action button next to When ellipse.MouseEnter is raised, and then use the drop-down boxes to change the new action to Quadruple.Begin.
    Now, when the user moves the mouse cursor over the ellipse, the Quadruple animation will interrupt the Double animation.
21. Add a new event trigger, change it to When ellipse.MouseLeave is raised, and add a new action for Double.Begin.
    When the user moves the mouse cursor outside of the ellipse, the Double animation will interrupt the Quadruple animation.
22. To see the behavior of your animation timelines and the event trigger that you just created, test your scene by clicking Test Project on the Project menu.
    There are no keyframes set at the 0 second mark for either animation. When you interrupt one animation with the other, the handoff behavior of the animation is a smooth transition from the width at the moment of interruption to the first keyframe of the subsequent animation. If you move your mouse cursor into the ellipse when it is at the end of the Double animation, the starting point of the Quadruple animation will not be from the original size of the ellipse; the Quadruple animation will start from the width of the ellipse when you moved the mouse. When you move the mouse out of the ellipse, the Double animation appears to be the reverse of the Quadruple animation because of the transition occurring between the two.
23. Exit your application to return to Expression Blend.
24. Under Objects and Timeline, select the ScaleX node of the ellipse, select the Quadruple timeline, move the play head to the 0 second mark, and then click the Record Keyframe button.
25. Test your animation again.
    The handoff behavior changes. When you move your mouse into the ellipse, the Quadruple animation starts from the original width of the ellipse.
    You can further examine a different handoff behavior by adding a keyframe at the 0 second mark of the Double animation and testing again, then deleting the keyframe at the 0 second mark of the Quadruple animation, and testing again.