提高动画的平滑度控件的移动

问题描述

| 我以以下方式实现了移动网格控件的动画：

<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\"
                    To=\"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,10\" 
      Text=\"{Binding Path=MessageText}\" />

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

</Grid>

动画效果很好，但是很丑。这是摇晃的/抖动的/生涩的，它确实看起来很不专业。有办法改善吗？我是否使用正确的方法来动画化

Margin

属性上的值更改以移动网格？我已经读过有关ѭ2的内容，但我不知道该如何使用。 此外，动画看起来不自然。我知道这可以改善，但我不知道如何。这些属性是什么，它们可以帮助我增强动画效果：

accelerationRatio

DecelerationRatio

EasingFunction

IsAdditive

IsCumulative

Speedratio

感谢您的帮助！ 附言我试图在XAML中放入尽可能多的代码，所以我更喜欢这种方法，但实际上，如果有什么可以改进的方法...     

解决方法

使用缓动函数，简单的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>

这应该非常流畅，请查看此缓动功能概述，以了解它们如何影响动画。 还要注意，持续时间对动画的外观有很大影响，这取决于您需要使用哪种缓动功能来设置较高的持续时间值，因为它们最终会显着降低速度。