WPF - 如何使UI元素沿椭圆的路径生成动画?

时间:2010-10-27 04:00:40

标签: wpf xaml animation

我有一个包含其他元素的画布。我需要这个画布沿圆形(椭圆形)路径连续动画。

如何在XAML中执行此操作?

1 个答案:

答案 0 :(得分:1)

不确定这是不是很难,但这有效......

<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>