Try it: Create overlapping animations

The timeline structure in Blend for Visual Studio 2012 allows you to have more than one animation timeline running at the same time in your application. The following procedure shows you how to create an animation of a butterfly that perpetually moves in a circle, but flaps its wings when the user's mouse moves over the butterfly.

Note

The following procedure uses triggers in a Windows Presentation Foundation (WPF) project to control the storyboards. Alternatively, you can use the ControlStoryboardAction behavior to control the storyboards, in either WPF or Microsoft Silverlight. For information about using a behavior, see Add a behavior to an object.

To create animations that overlap

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

2. Switch to the Animation workspace. (Ctrl+F11 will switch between the available workspaces. In the Animation workspace, the Objects and Timeline panel is underneath the artboard.)

3. If a storyboard is open, click Close Storyboard  in the Objects and Timeline panel.

   Note

   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 Ellipse from the Tools panel. Draw two small circles on the right side of the artboard. You can make the values of the Height and Width properties the same under the Layout category of the Properties panel to make the ellipses perfect circles. If you see clipping behavior, then adjust the Margin properties.

5. Choose Selection from the Tools panel and move the circles close together, as in the following image:

   Two circles drawn on the artboard

   

6. To work with both circles at the same time, select one circle in the Objects and Timeline panel, hold the CTRL key so that you can also select the other circle, right-click the selected circles, select Group Into, and then click Grid.

   A new Grid layout panel appears in the Objects and Timeline panel that contains the two circles.

7. Rename the Grid object by right-clicking it and then choosing Rename. Change the name to Butterfly.

8. To create the circular animation, you can use the Convert to Motion Path tool that generates an animation timeline from a path. Draw a third ellipse in the center of the artboard, about half as wide as the artboard surface.

9. With the new ellipse selected in the Objects and Timeline panel, select Path on the Object menu, and then click Convert to Motion Path.

   The Choose Target for Motion Path dialog appears.

10. Select the ButterflyGrid object from the list of objects that are on the artboard, and then click OK.

    A new timeline is created. Blend enters into the recording mode of the new timeline so that you can click Play  to view the animation on the artboard. The target (Butterfly) moves along the motion path that was generated from the ellipse. Note that if the Fill property of the ellipse is set to a brush, it will cover part of the Butterfly object.

11. You do not need the third ellipse anymore, so delete it.

12. In the Objects and Timeline panel, expand the nodes for the Butterfly, RenderTransform, and Translation elements so that you can view the Motion Path time span. Right-click the Motion Path element or the grey bar that represents the time span, and then click Edit Repeat Count.

    The Edit Repeat dialog appears.

13. To make the timeline repeat forever, click Set to forever, and then click OK.

    When this animation runs, it will now loop repeatedly.

14. In the Objects and Timeline panel, click New .

    The Create Storyboard Resource dialog appears.

15. In the Resource name (Key) field, enter the name Flap, and then click OK.

    Blend enters the timeline recording mode for the new timeline with the playhead at the 0 second mark. While in recording mode, any property that you set will automatically record a keyframe on the timeline.

16. To set a keyframe at the 0 second position, select the ButterflyGrid object and click Record Keyframe .

    A keyframe  appears on the timeline in the row that corresponds to the ButterflyGrid object.

17. Drag the playhead to the 1 second mark, and then record another keyframe.

    The starting and ending positions of your animation are now set.

18. Drag the playhead to the 0.5 second mark, between the previous two keyframes.

19. Choose the Selection tool from the Tools panel, hold the ALT key, and then on the artboard, stretch the height and compress the width of the ButterflyGrid object so that it looks like the following image.

    Because Blend is in the recording mode for the Flap animation timeline, the action of modifying the ButterflyGrid object sets new keyframes at the 0.5 second mark for the ScaleX and ScaleY properties of the Grid object.

    Stretching the Grid object on the artboard

    

20. In the Objects and Timeline panel, expand the nodes for the ButterflyGrid object until you see the ScaleX and ScaleY nodes. One after the other, select the nodes, right-click them, select Edit Repeat Count, and then in the Edit Repeat dialog, enter 2 in order to make the timeline run twice, and click OK.

21. Click the Play button to test your animation on the artboard. Note that the repeat value will not be a part of the playback on the artboard. If you want to adjust the timing of your animation, you can move the keyframes on the grey time span bar.

    Note

    If there is not enough room to view the entire timeline, you can use the Timeline zoom text box to zoom out the timeline. You can also change the width of the panels to view more of the Objects and Timeline panel.

22. You can now set up triggers for your animations. Any new timeline created in the root of your document will cause a default event trigger to be added in the Triggers panel for the Window.Loaded event that occurs when your application starts.

    You can keep that trigger for the circular timeline, and add a new one for the Flap timeline.

23. 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 Flap.Begin to delete that action.

    Now, the circular animation will still begin when the application starts, but the Flap animation will not.

    Note

    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.

    Removing the Flap animation from the Window.Loaded trigger

    

24. To add the trigger for the Flap animation, click Add event trigger in the Triggers panel.

    A new Window.Loaded trigger is created.

25. Select the ButterflyGrid object 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 Butterfly.MouseEnter is raised.

26. Click Add new action next to When Butterfly.MouseEnter is raised, and then use the drop-down boxes to change the new action to Flap.Begin.

    Now, when the user moves the pointer over the butterfly, the Flap animation timeline will begin.

    Creating a new trigger for the MouseEnter event for the Grid object

    

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

    Note

    If the circular animation is running too fast, you can adjust the running time of the timeline. In the Objects and Timeline panel, select the motion path timeline from the drop-down box, expand the nodes underneath the Grid object until you see the Motion Path node, grab the right end of the grey time span bar, and drag it to the right to extend its end time.

    Alternatively, you can delete the circular timeline, create a new timeline, and then start at step 8 (draw an ellipse) to create the motion path. (If you do not create a new timeline before starting at step 8, then the circular animation will be added to the Flap animation timeline.)