WPF xaml 轨道动画不保持路径答案

【问题标题】：WPF xaml orbit animation not maintaining pathWPF xaml 轨道动画不保持路径
【发布时间】：2013-04-02 04:40:49
【问题描述】：

我正在尝试创建三个路径（轨道路径）并让三个椭圆（行星、环）沿着它们行进，我关注了一些不同的博客和论坛帖子，但我不明白为什么椭圆不在路径。

这里是 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。

【问题讨论】：

如果你改变椭圆Height="1"它是否保持在轨道上？？我怀疑动画没有考虑椭圆的大小，所以它使用椭圆的顶部/左侧进行计算不是椭圆的中心

标签： wpf xaml animation

【解决方案1】：

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

解决此问题的一种方法是将Ellipse 的Margin 设置为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" ......../>

结果：

之前：之后：

【讨论】：