Animate the vertices of a path

Animate the vertices of a path

Expression Studio 2.0

This page applies to Silverlight 1 projects only

You can animate the vertices (or points) on a path to create shapes that change.

  1. In your Silverlight 1.0 project, switch to the Page.xaml document.

  2. If your storyboard is no longer open, click the Open a Storyboard Cc296374.d4531c86-5048-481c-a1ca-29af202d28e7(en-us,Expression.10).png button under Objects and Timeline, and then select Storyboard1 from the storyboard picker.

    Cc296374.81e08f17-af0e-4d80-858d-334cc728d0d6(en-us,Expression.10).png
  3. Click the Direct Selection Cc296374.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.10).png tool in the Toolbox so that you can select individual points (or vertices) on the MyPath object.

  4. Move the timeline playhead to the 1-second mark, and then, on the artboard, hold the ALT key when you drag one of the points on the MyPath object. Expand the MyPath object under Objects and Timeline so that you can see the child object that is named Data, on which the new keyframe was created.

    Cc296374.326d9375-64e2-40cc-8ff0-31d1570b4758(en-us,Expression.10).png

    You can repeat this step at different points on the timeline.

  5. Select a keyframe under Objects and Timeline, and then under Easing in the Properties panel, drag the endpoints of the spline curve to modify the easing behavior of the keyframe.

    Cc296374.b776b91f-012a-4d93-bc99-8c0d2be1915c(en-us,Expression.10).png
  6. Test the changes to your animation by pressing F5 and clicking in the browser window to trigger the animation storyboard.

    You can use vertex animation on any path object, including clipping paths. Vertex animation is also supported in Windows Presentation Foundation (WPF) projects.

Community Additions

ADD
Show:
© 2016 Microsoft