Create, modify, or delete a motion path

  • Article

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

    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 Cc295124.d4531c86-5048-481c-a1ca-29af202d28e7(en-us,Expression.30).png under Objects and Timeline. Otherwise, create a new timeline by clicking New Cc295124.86937695-03dd-44ea-aa30-28d4029b3ad0(en-us,Expression.30).png, and give it a name.

  3. Move the playhead Cc295124.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.30).png to the location where you want the motion path to start.

    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 Cc295124.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,Expression.30).png or Rectangle Cc295124.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,Expression.30).png. You can modify a shape on the artboard by using the Selection tool Cc295124.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png and dragging the blue adorners that appear around the object, or by changing the properties in the Transform category of the Properties panel.

      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 Cc295124.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.30).png or Pencil Cc295124.509dc167-734f-46c9-b012-987ee63450cd(en-us,Expression.30).png. You can modify a drawn path using Direct Selection Cc295124.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.30).png to move individual points.

      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

    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 Cc295124.706bbd5c-c0e0-43a1-9604-297f019d0275(en-us,Expression.30).png, and set the Stroke property to Solid Color Brush Cc295124.3a66ec96-47bb-47fc-8876-6b9456feec3a(en-us,Expression.30).png. 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

    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 Cc295124.64ad8e84-1eec-4154-9d0c-11fef322c0bf(en-us,Expression.30).png 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 Cc295124.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png 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 Cc295124.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.30).png 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.

    Cc295124.d91d85ca-603a-4451-8870-7dab7077028d(en-us,Expression.30).png

    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.

See also

Tasks

Add or remove a point on a path