Try it: Playing with handoff and nonhandoff animations
If multiple animation timelines animate the same property at the same time, the transition behaves differently depending on whether there is a keyframe recorded at the 0-second mark. The following procedure helps you to understand how handoff and nonhandoff animations work.
To compare handoff and nonhandoff animations
In Microsoft Expression Blend, open or create a new project. For more information, see Create a new document or project.
Press F6 to switch to the Animation Workspace. (F6 will switch between the Design Workspace and the Animation Workspace. In the Animation Workspace, the Interaction panel is under the artboard.)
Select the Close Storyboard
.png "Cc295058.4c066464-3a41-452d-b2e9-e95f6c5659ff(en-us,Expression.10).png")
button under Objects and Timeline.Tip
When a storyboard open, any property change that you make will automatically record a keyframe on the timeline in the storyboard.
Select the Ellipse
.png "Cc295058.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,Expression.10).png")
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.Under Objects and Timeline, click the New
.png "Cc295058.86937695-03dd-44ea-aa30-28d4029b3ad0(en-us,Expression.10).png")
button.The Create Storyboard Resource dialog box appears.
In the Resource name (Key) field, enter the name Double, and then click OK.
Expression Blend enters timeline recording mode with the playhead
.png "Cc295058.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.10).png")
at the 0-second mark. While in recording mode, any property that you set will automatically record a keyframe on the timeline.Do not set a keyframe at the 0-second mark. Instead, drag the playhead to the 1-second mark.
Choose the Selection
.png "Cc295058.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png")
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.
Tip
Holding the ALT key while you resize an object on the artboard maintains the center point.
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 box appears.
To make the timeline repeat forever, click the Setto forever
.png "Cc295058.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(en-us,Expression.10).png")
button, and then click OK.Under Objects and Timeline, click the New
button.The Create Storyboard Resource dialog box appears.
In the Resourcename (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.
As you did previously, do not set a keyframe at the 0-second mark. Instead, drag the playhead to the 1-second mark.
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.
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.
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.
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.
Tip
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.
To add the trigger for the Quadruple animation, click the Add event trigger
.png "Cc295058.671c69bb-32e9-4ef9-9837-29403524abd0(en-us,Expression.10).png")
button under Triggers.A new Window.Loaded trigger is created.
Select the ellipse under Objects and Timeline, and then under Triggers, use the drop-down boxes to change the new trigger from When Window.Loadedis raised to When ellipse.MouseEnteris raised.
Click the Add new action
.png "Cc295058.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(en-us,Expression.10).png")
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.
Add a new event trigger, change it to When ellipse.MouseLeaveis 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.
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. The resulting transition between animations is called handoff 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.
Exit your application to return to Expression Blend.
Under Objects and Timeline, select the ScaleX node of the ellipse, select the Quadruple timeline, move the playhead to the 0-second mark, and then click the Record Keyframe button.
Test your animation again. The transition 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 transition 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.