改進動畫平滑度（控件移動）

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。

另請注意，持續時間對動畫效果有很大影響，具體取決於您使用的緩衝功能設置高持續時間值，因爲它們在最後顯着減慢。