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没有考虑到Ellipse为使用的解决这个问题的Ellipse

一种方式Ellipse不是中心的Top/Left其动画的Size是设置的的MarginEllipse到Size

实施例的负半：

<Ellipse x:Name="smallEllipse" Margin="-10" Height="20" Width="20" ......./> 
    <Ellipse x:Name="mediumEllipse" Margin="-20" Height="40" Width="40" ......./> 
    <Ellipse x:Name="largeEllipse" Margin="-30" Height="60" Width="60" ......../> 

结果：

前：后：