Partilhar via

Create, modify, or delete a motion path

  • Artigo

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 under Objects and Timeline (hold 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 into which you want the motion path timeline to be added, select the storyboard from the Storyboard picker by clicking the Open a Storyboard button Cc295124.d4531c86-5048-481c-a1ca-29af202d28e7(en-us,Expression.10).png under Objects and Timeline. Otherwise, create a new timeline by clicking the New Cc295124.86937695-03dd-44ea-aa30-28d4029b3ad0(en-us,Expression.10).png button, and give it a name.

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

    Warning

    If you have existing storyboards in your application, but you do not select one before creating a motion path, then 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. From the Toolbox, 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 the Ellipse Cc295124.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,Expression.10).png or Rectangle Cc295124.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,Expression.10).png tool. You can modify a shape on the artboard by using the Selection Cc295124.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png tool 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 top-left corner of a rectangle, and at the right side of an ellipse. If you want your starting point to be different, then 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 the Pen Cc295124.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png or Pencil Cc295124.509dc167-734f-46c9-b012-987ee63450cd(en-us,Expression.10).png tool. You can modify a drawn path using the Direct Selection Cc295124.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.10).png tool 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 onto the artboard.

    Tip

    You can create more complex shapes and paths by using the pen, compound path, and clipping tools. For more information, see Convert a shape to a path, Change the shape of a curve, Combine shapes or paths, and Apply, modify, or remove a clipping path.

  6. With your path object selected under Objects and Timeline, set the Fill property in the Brushes category of the Properties panel to No Brush Cc295124.706bbd5c-c0e0-43a1-9604-297f019d0275(en-us,Expression.10).png and set the Stroke property to Solid Color Brush Cc295124.3a66ec96-47bb-47fc-8876-6b9456feec3a(en-us,Expression.10).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 under Objects and Timeline, point to Path on the Object menu, and then click Convert to Motion Path. The Choose Targetfor 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 under Objects and Timeline, its type will be displayed in the Choose Target for 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 timelines 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 under Objects and Timeline 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 the Play Cc295124.64ad8e84-1eec-4154-9d0c-11fef322c0bf(en-us,Expression.10).png button 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 the Direct Selection Cc295124.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png tool from the Toolbox.

  3. Select your moving object under Objects and Timeline. 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 the Pen Cc295124.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png tool 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 the ALT key when you drag the curve.

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

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

    For more path modification features, see Pen and direct selection usage.

To modify the duration of a motion path

  1. Expand the nodes of your moving object under Objects and Timeline 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 continually orient itself to the path

  1. Expand the nodes of your moving object under Objects and Timeline 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.

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

See also

Concepts

Add or remove a point on a path