Progressive Arcs in XAML
January 16, 2008
Roscoe, N.Y.
No, these are not arcs who participate in anti-war demonstrations (alas). These are arcs that get longer with time, seemingly drawing themselves. It's a technique similar to the one I showed in a blog entry long, long ago:
but with arcs instead of lines:
The figure consists of eight 180° ArcSegment objects, and the animations are eight PointAnimationUsingPath objects, each targetting the Point property of each ArcSegment. Notice that all the targetted points start at the same value, and all the animations start out the same, but one by one they stop based on both the PathGeometry and the Duration, leaving that point fixed.
For a fun variation, add
-
StrokeDashCap="Round" StrokeDashArray="0 2"
to the Path element.