WPF - How do I make a UI element animate along a path of an ellipse?
I h开发者_StackOverflow中文版ave a canvas that contains a couple other elements. I need this canvas to animate continuously along a circular (elliptical) path.
How can I do this in XAML?
not sure if this is doing it the hard way or not but this works...
<Canvas>
<Rectangle Height="30" Width="30" Fill="Blue">
<Rectangle.RenderTransform>
<MatrixTransform x:Name="elementMatrixTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="elementMatrixTransform"
Storyboard.TargetProperty="Matrix"
Duration="0:0:10"
RepeatBehavior="Forever">
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="0,50">
<ArcSegment Point="50,0" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="100,50" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="50,100" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="0,50" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
</PathFigure>
</PathGeometry>
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
精彩评论