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" ......../> 

結果：

前：後：