Create a simple animation (Blend for Visual Studio)

You can animate any visual element in Blend for Visual Studio 2012.

To create a simple animation

  1. In Blend, open or create a new project.

    For more information, see Create a new project (Windows Store apps).

  2. Press Ctrl+F11 to switch to the Animation workspace. (Ctrl+F11 will switch between the available workspaces. In the Animation workspace, the Objects and Timeline panel is under the artboard.) Create any objects that you plan to animate.

    Tip

    Object refers to an item on the artboard in Blend. For example, when you select Rectangle JJ155234.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,VS.110).png from the Tools panel and draw a rectangle on the artboard, you create a rectangle object..

  3. In the Objects and Timeline panel, click New JJ155234.86937695-03dd-44ea-aa30-28d4029b3ad0(en-us,VS.110).png.

    The Create Storyboard Resource dialog box appears.

  4. In the Resource name (Key) field, type a name for the timeline, and then click OK. Blend enters timeline-recording mode with the playhead JJ155234.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,VS.110).png at the 0-second mark. When in recording mode, any property that you set will automatically record a keyframe on the timeline.

  5. In the Objects and Timeline panel, select the object that you want to animate.

  6. If you want the selected object to start at its current position and appearance, click Record Keyframe JJ155234.e8ec61d4-c8e8-465a-85a7-70bf787a67de(en-us,VS.110).png to record the object at the 0-second mark. A keyframe JJ155234.fa3c696d-5463-4000-8a6b-650fe6759bf7(en-us,VS.110).png appears on the timeline in the row that corresponds to the selected object.

  7. In the Objects and Timeline panel, drag the playhead to the point in time where the animation should finish.

  8. If you want your object to look the same at the end of the animation as it does at the start of the animation, click the Record Keyframe button.

  9. Move the playhead to a location in the timeline where you want a property change to occur.

  10. Change a property of the selected object, such as the position, color, or size of the object. A keyframe automatically appears on the timeline to record the property change.

    Tip

    You can view the individual property keyframes by expanding the node for your object. This is useful if you want to move a keyframe for an individual property instead of for the whole object.

  11. To see the animation that you just created, click the Play button at the top of Objects and Timeline.

    Tip

    To exit timeline recording mode, click Close Storyboard JJ155234.4c066464-3a41-452d-b2e9-e95f6c5659ff(en-us,VS.110).png to return to the initial state of all objects in the current scope.

See Also

Tasks

Test a storyboard (Blend for Visual Studio)