Create, modify, or delete a motion path
.png "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
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.
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
.png "Cc295124.d4531c86-5048-481c-a1ca-29af202d28e7(en-us,Expression.10).png")
under Objects and Timeline. Otherwise, create a new timeline by clicking the New .png "Cc295124.86937695-03dd-44ea-aa30-28d4029b3ad0(en-us,Expression.10).png")
button, and give it a name.Move the playhead
.png "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.
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
.png "Cc295124.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,Expression.10).png")
or Rectangle .png "Cc295124.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,Expression.10).png")
tool. You can modify a shape on the artboard by using the Selection .png "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
.png "Cc295124.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png")
or Pencil .png "Cc295124.509dc167-734f-46c9-b012-987ee63450cd(en-us,Expression.10).png")
tool. You can modify a drawn path using the Direct Selection .png "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.
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.
With your path object selected under Objects and Timeline, set the Fill property in the Brushes category of the Properties panel to No Brush
.png "Cc295124.706bbd5c-c0e0-43a1-9604-297f019d0275(en-us,Expression.10).png")
and set the Stroke property to Solid Color Brush .png "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.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.
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.
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.
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.
Click the Play
.png "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
Open the storyboard that contains the motion path. For more information, see Open or close a storyboard.
Select the Direct Selection
tool from the Toolbox.Select your moving object under Objects and Timeline. A dashed line with points (vertices) will appear on the artboard representing your motion path.
Modify the path using any one of the following methods:
Drag a point.
Add a new point to the path by selecting the Pen
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.
.png "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
Expand the nodes of your moving object under Objects and Timeline until you see the Motion Path node.
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
Expand the nodes of your moving object under Objects and Timeline until you see the Motion Path node.
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.