改进动画平滑度（控件移动）

Question

我已经实现以下方式网格控制的移动的动画：

<Grid 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center"> 
    <Grid.RowDefinitions> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <Grid.Style> 
    <Style TargetType="Grid"> 
     <Style.Triggers> 
     <DataTrigger 
      Binding="{Binding ElementName=rootLayout, Path=IsVisible}" 
      Value="True"> 
      <DataTrigger.EnterActions> 
      <BeginStoryboard> 
       <Storyboard> 
       <ThicknessAnimation 
        Storyboard.TargetProperty="Margin"      
        From="-500,0,0,0" 
        To="0,0,0,0" 
        Duration="0:0:0.5" /> 
       </Storyboard> 
      </BeginStoryboard> 
      </DataTrigger.EnterActions> 
     </DataTrigger> 
     </Style.Triggers> 
    </Style> 
    </Grid.Style> 

    <Border 
     Grid.RowSpan="2" 
     Background="Black" 
     CornerRadius="6" >   
    <Border.Effect> 
     <DropShadowEffect /> 
    </Border.Effect> 
    </Border> 

    <TextBlock 
     Grid.Row="0" 
     Width="400" 
     Height="200" 
     Margin="20,20,20,10" 
     Text="{Binding Path=MessageText}" /> 

    <Button 
     Grid.Row="1" 
     Margin="20,5,20,15" 
     HorizontalAlignment="Right" 
     Width="75" 
     Content="OK" 
     Command="{Binding Path=CloseDialogCommand}" /> 

</Grid> 

的动画作品很好，但它的丑陋。它摇摇晃晃/紧张/生涩，而且看起来确实不专业。有没有办法改善这一点？我是否正确地使用Margin属性的值更改动画来移动网格？我已阅读RenderTransform，但我不知道如何在我的情况下使用它。

此外，动画看起来不自然。我知道这可以改善，但我不知道如何。这些是什么性质，他们可以帮助我提高我的动画：

• AccelerationRatio
• DecelerationRatio
• EasingFunction
• IsAdditive
• IsCumulative
• SpeedRatio

感谢您的帮助！

P.S.我试图在XAML中放置尽可能多的代码，所以我更喜欢这种方法，但实际上，如果有什么需要改进的话...

Answer 1

使用缓动函数，简单的DoubleAnimation和RenderTransform

<Button Content="Test"> 
    <Button.RenderTransform> 
     <TranslateTransform/> 
    </Button.RenderTransform> 
    <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.Click"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" 
            From="-500" To="0"> 
         <DoubleAnimation.EasingFunction> 
          <CubicEase EasingMode="EaseOut"/> 
         </DoubleAnimation.EasingFunction> 
        </DoubleAnimation> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Button.Triggers> 
</Button> 

这应该是比较顺利的，对缓解功能，以得知他们如何影响动画的想法退房this overview。

另请注意，持续时间对动画效果有很大影响，具体取决于您使用的缓冲功能设置高持续时间值，因为它们在最后显着减慢。