wpf - WPF xaml 軌道アニメーションがパスを維持しない

Question

3 つのパス (軌道パス) を作成し、それらに沿って移動する 3 つの楕円 (惑星、リング) を取得しようとしています。いくつかの異なるブログやフォーラムの投稿をたどりましたが、楕円がパス上を移動しない理由がわかりません。

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、のEllipseTop/LeftEllipseEllipse

これを回避する 1 つの方法はMargin、 のEllipseを の負の半分に設定することです。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" ......../>

結果：

前:後: