Listing 19.1 uses
DoubleAnimationUsingKeyFrames to help move a circle (
Ellipse) in a zigzag pattern, as illustrated in Figure 19.9. The blue lines are there to show the path that the circle traveled to get to its final spot. Because the
Image is inside a
Canvas, the motion is accomplished by animating the
Canvas.Top attached properties rather than using the more versatile
TranslateTransform. These are still independent animations, however!
<Page ...> <Page.Resources> <Storyboard x:Name="storyboard" TargetName="circle" > <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="500" Duration="0:0:3"/> ...