WPF xaml轨道动画不保持路径

Question

我正在尝试创建三条路径（轨道路径）并获得三个椭圆（行星，环）沿着它们行进，我已经关注了几个不同的博客和论坛帖子，但我看不出为什么省略号不会在路径。

这是xaml：

<Window     
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ResizeMode="NoResize"
Title="Window2" Width="800" Height="600">
<Window.Resources>
    <PathGeometry x:Key="smallGeo" Figures="M 400,250C 427.614,250 450,272.386 450,300C 450,327.614 427.614,350 400,350C 372.386,350 350,327.614 350,300C 350,272.386 372.386,250 400,250"/>
    <PathGeometry x:Key="mediumGeo" Figures="M 400,245C 430.376,245 455,269.624 455,300C 455,330.376 430.376,355 400,355C 369.624,355 345,330.376 345,300C 345,269.624 369.624,245 400,245"/>
    <PathGeometry x:Key="largeGeo" Figures="M 400,240C 433.137,240 460,266.863 460,300C 460,333.137 433.137,360 400,360C 366.863,360 340,333.137 340,300C 340,266.863 366.863,240 400,240"/>
</Window.Resources>
<Grid Width="800" Height="600" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Canvas>
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <!-- Small orbit animation -->
                        <DoubleAnimationUsingPath 
                        Storyboard.TargetName="smallEllipse" 
                        Storyboard.TargetProperty="(Canvas.Left)" 
                        PathGeometry="{StaticResource smallGeo}" 
                        Duration="0:0:5" 
                        RepeatBehavior="Forever" 
                        Source="X"/>
                        <DoubleAnimationUsingPath 
                        Storyboard.TargetName="smallEllipse" 
                        Storyboard.TargetProperty="(Canvas.Top)" 
                        PathGeometry="{StaticResource smallGeo}" 
                        Duration="0:0:5" 
                        RepeatBehavior="Forever" 
                        Source="Y"/>
                        <!-- Medium orbit animation -->
                        <DoubleAnimationUsingPath 
                        Storyboard.TargetName="mediumEllipse" 
                        Storyboard.TargetProperty="(Canvas.Left)" 
                        PathGeometry="{StaticResource mediumGeo}" 
                        Duration="0:0:5" 
                        RepeatBehavior="Forever" 
                        Source="X"/>
                        <DoubleAnimationUsingPath 
                        Storyboard.TargetName="mediumEllipse" 
                        Storyboard.TargetProperty="(Canvas.Top)" 
                        PathGeometry="{StaticResource mediumGeo}" 
                        Duration="0:0:5" 
                        RepeatBehavior="Forever" 
                        Source="Y"/>
                        <!-- Large orbit animation -->
                        <DoubleAnimationUsingPath 
                        Storyboard.TargetName="largeEllipse" 
                        Storyboard.TargetProperty="(Canvas.Left)" 
                        PathGeometry="{StaticResource largeGeo}" 
                        Duration="0:0:5" 
                        RepeatBehavior="Forever" 
                        Source="X"/>
                        <DoubleAnimationUsingPath 
                        Storyboard.TargetName="largeEllipse" 
                        Storyboard.TargetProperty="(Canvas.Top)" 
                        PathGeometry="{StaticResource largeGeo}" 
                        Duration="0:0:5" 
                        RepeatBehavior="Forever" 
                        Source="Y"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
        <Ellipse x:Name="smallEllipse" Height="20" Stroke="Green" StrokeThickness="5" Width="20" RenderTransformOrigin="0.5,0.5"/>
        <Ellipse x:Name="mediumEllipse" Height="40" Stroke="Red" StrokeThickness="5" Width="40" RenderTransformOrigin="0.5,0.5"/>
        <Ellipse x:Name="largeEllipse" Height="60" Stroke="Blue" StrokeThickness="5" Width="60" RenderTransformOrigin="0.5,0.5"/>
        <Path Stroke="Green" Data="{StaticResource smallGeo}"/>
        <Path Stroke="Red" Data="{StaticResource mediumGeo}"/>
        <Path Stroke="Blue" Data="{StaticResource largeGeo}"/>
    </Canvas>
</Grid>

我使用MS表达式设计来创建路径，使用kaxaml来预览xaml。

Answer 1

我怀疑Animation没有考虑Size的{​​{1}}作为动画使用Ellipse的{​​{1}}而不是中心Top/Left

解决此问题的一种方法是将Ellipse的{​​{1}}设置为Ellipse的负半部

示例：

Margin

结果：

之前：之后：