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

  1. In Blend for Visual Studio 2012, open or create a new project. For more information, see Create a new project.

  2. Press F6 to switch to the Animation workspace. (F6 will switch between the available workspaces. In the Animation workspace, the Objects and Timeline panel is under the artboard.)

  3. Select Close Storyboard JJ170070.4c066464-3a41-452d-b2e9-e95f6c5659ff(ja-jp,VS.110).png in the Objects and Timeline panel.

    ヒントヒント

    When a storyboard open, any property change that you make will automatically record a keyframe on the timeline in the storyboard.

  4. Select Ellipse JJ170070.8938cfdf-9b75-4a33-bc88-b0636e114a0d(ja-jp,VS.110).png from the Tools panel. 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. In the Objects and Timeline panel, click New JJ170070.86937695-03dd-44ea-aa30-28d4029b3ad0(ja-jp,VS.110).png.

    The Create Storyboard Resource dialog box appears.

  6. In the Resource name (Key) field, enter the name Double, and then click OK.

    Blend enters timeline recording mode with the playhead JJ170070.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,VS.110).png 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 playhead to the 1-second mark.

  8. Choose Selection JJ170070.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,VS.110).png from the Tools panel, 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. In the Objects and Timeline panel, 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.

  10. To make the timeline repeat forever, click Set to foreverJJ170070.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(ja-jp,VS.110).png, and then click OK.

  11. In the Objects and Timeline panel, click New JJ170070.86937695-03dd-44ea-aa30-28d4029b3ad0(ja-jp,VS.110).png.

    The Create Storyboard Resource dialog box appears.

  12. In the Resource name (Key) field, enter the name Quadruple, and then click OK.

    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 playhead to the 1-second mark.

  14. Choose the Selection tool from the Tools panel, 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 in the Triggers panel for the Window.Loaded event. You can keep that trigger for the Double timeline, and add a new one for the Quadruple timeline.

  17. In the Triggers panel, 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 panel to see the Properties when active section. To adjust the size, click and drag the borders of the panel and the border within the panel.

  18. To add the trigger for the Quadruple animation, click Add event triggerJJ170070.671c69bb-32e9-4ef9-9837-29403524abd0(ja-jp,VS.110).png in the Triggers panel.

    A new Window.Loaded trigger is created.

  19. Select the ellipse in the Objects and Timeline panel, and then in the Triggers panel, use the drop-down boxes to change the new trigger from When Window.Loaded is raised to When ellipse.MouseEnter is raised.

  20. Click Add new actionJJ170070.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,VS.110).png 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 pointer over the ellipse, the Quadruple animation will interrupt the Double animation.

  21. 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 pointer 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. 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 pointer 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 Blend.

  24. In the Objects and Timeline panel, 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.

  25. 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.