Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Create, modify, or delete a motion path

Visual Studio 2012

This page applies to WPF projects only

You can generate an animation timeline automatically by using the Convert to Motion Path tool that makes a target object follow a path on the artboard, whether that path is a line or the perimeter of a shape (such as an ellipse or a rectangle). You can then modify the motion path, changing the path of travel, the repeat count, and the orientation of the object to the path.

To create a motion path

  1. If you do not yet have an object that you want to make follow a motion path, create the object, and then give it a name. (You do not have to create the moving object first, but it simplifies this procedure. You also do not have to give the object a name, but it makes it easier to identify your object in a later step when you use the Convert to Motion Path tool.)

    Tip Tip

    If you want to apply the motion path to more than one object, you can group the objects into a panel object and then apply the motion path to the panel. To group objects together, select the objects in the Objects and Timeline panel (hold down the CTRL key to select more than one), right-click your selection, point to Group Into, and then click the type of panel that you want.

  2. If you have a storyboard to which you want the motion path timeline to be added, select the storyboard from the Storyboard picker by clicking Open a Storyboard d4531c86-5048-481c-a1ca-29af202d28e7 under Objects and Timeline. Otherwise, create a new timeline by clicking New 86937695-03dd-44ea-aa30-28d4029b3ad0, and give it a name.

  3. Move the playhead 5626c9eb-40bb-450a-9ca1-3678e5abe429 to the location where you want the motion path to start.

    Note Note

    If you have existing storyboards in your application, but you do not select one before creating a motion path, the motion path will be added to the first timeline listed in the Storyboard picker. If you have no storyboards in your application before you create a motion path, one will be created that has a default name.

  4. In the Tools panel, select the drawing tool that can produce the path that you want your moving object to follow:

    • If you want your object to move in a circular or rectangular motion, select Ellipse 8938cfdf-9b75-4a33-bc88-b0636e114a0d or Rectangle 81ffc148-cf5c-4faf-bd3f-f38d3073a12c. You can modify a shape on the artboard by using the Selection tool 2ff91340-477e-4efa-a0f7-af20851e4daa and dragging the blue adorners that appear around the object, or by changing the properties in the Transform category of the Properties panel.

      Tip Tip

      By default, a motion path starts at the upper-left corner of a rectangle, and at the right side of an ellipse. If you want your starting point to be different, rotate the shape before you create the motion path. Additionally, motion paths run clockwise, so if you want your motion path to run counter-clockwise, flip the shape (point to Flip on the Object menu) before you create the motion path.

    • If you want your object to move along a drawn path, use Pen 894f8612-e0ed-4e00-84cf-a9bc8f38fc54 or Pencil 509dc167-734f-46c9-b012-987ee63450cd. You can modify a drawn path using Direct Selection 6dd6571f-c116-451d-8dd2-1f88b8406362 to move individual points.

      Tip Tip

      By default, a motion path starts at the origin (first point) of a drawn path.

  5. Draw your path object on the artboard.

    Tip Tip

    You can create more complex shapes and paths by using the pen, compound path, and clipping tools.

    For more information, see the following topics:

  6. With your path object selected in the Objects and Timeline panel, set the Fill property in the Brushes category of the Properties panel to No Brush 706bbd5c-c0e0-43a1-9604-297f019d0275, and set the Stroke property to Solid Color Brush 3a66ec96-47bb-47fc-8876-6b9456feec3a. This step is not required, but it makes it easier to see the outline of your path object clearly.

  7. With your path object still selected in the Objects and Timeline panel, point to Path on the Object menu, and then click Convert to Motion Path.

    The Convert to Motion Path dialog box appears.

  8. The target for the motion path is your moving object. Select the name of your moving object from the list, and then click OK.

    Note Note

    If you have not named your moving object in the Objects and Timeline panel, its type will be displayed in the Convert to Motion Path dialog box. After you create the motion path, your moving object will automatically be named. This is because an object must have a name to be referenced elsewhere in your application.

    After you click OK, a motion path timeline is generated that represents the movement of your object along the path. The timeline is added to the open storyboard or a new storyboard.

  9. At this point, you can delete the shape or drawn path that you used to generate the motion path, because it is not a part of the timeline.

  10. To modify the playing time of the motion path, expand the nodes of your moving object in the Objects and Timeline panel until you see the Motion Path node, and then, on the timeline, drag the blue bars on the ends of the shaded time-span bar. You can also modify the repeat count for your motion path.

    For an example, see Set the loop duration.

  11. Click Play 64ad8e84-1eec-4154-9d0c-11fef322c0bf to test your new motion path.

To modify the path of a motion path

  1. Open the storyboard that contains the motion path.

    For more information, see Open or close a storyboard.

  2. Select Direct Selection 2ff91340-477e-4efa-a0f7-af20851e4daa in the Tools panel.

  3. Select your moving object in the Objects and Timeline panel. A dashed line with points (vertices) will appear on the artboard, representing your motion path.

  4. Modify the path using any one of the following methods:

    • Drag a point.

    • Add a new point to the path by selecting Pen 894f8612-e0ed-4e00-84cf-a9bc8f38fc54 and then clicking the dashed line.

    • Move the curve between two points by dragging the curve.

    • Change the shape of a curve between two points by holding down the ALT key when you drag the curve.

    • Reverse the direction of animation by transforming (or flipping) the path.

    • Click a point, and then drag one of the tangent endpoints.

    d91d85ca-603a-4451-8870-7dab7077028d

    For more path modification features, see Direct Selection tool modifier keys and Pen tool modifier keys.

To modify the duration of a motion path

  1. Expand the nodes of your moving object in the Objects and Timeline panel until you see the Motion Path node.

  2. On the timeline, drag the blue bars on the ends of the shaded time-span bar. You can also modify the repeat count for your motion path.

    For an example, see Set the loop duration.

To make the moving object continuously orient itself to the path

  1. Expand the nodes of your moving object in the Objects and Timeline panel until you see the Motion Path node.

  2. Right-click the Motion Path node and then select Orient to Path.

To delete a motion path

  • If your motion path is the only timeline in the storyboard, you can delete the storyboard.

    For more information, see Create, modify, or delete a storyboard.

  • If your motion path is not the only timeline in the storyboard, you can delete just the motion path timeline. Expand the nodes of your moving object in the Objects and Timeline panel until you can select the Motion Path node, and then press DELETE.

Show:
© 2015 Microsoft