提高动画平滑度(控件的移动) [英] Improve animation smoothness (moving of controls)

问题描述

我通过以下方式实现了移动网格控件的动画:

I have implemented the animation of moving of a grid control in the following manner:

<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，但我不知道如何在我的情况下使用它.

The animation works fine, but it's ugly. It is shaky / jittery / jerky and it really looks unprofessional. Is there a way to improve this? Am I using the right approach with animating the value change on the Margin property in order to move the grid? I've read about RenderTransform, but I don't know how to use it in my case.

此外，动画看起来不自然.我知道这可以改进，但我不知道如何改进.这些属性是什么，它们可以帮助我增强动画效果:

Also, the animation looks unnatural. I know this can be improved but I don't know how. What are these properties and can they help me enhance my animation:

• 加速比
• 减速比
• EasingFunction
• IsAdditive
• IsCumulative
• 速度比

感谢您的帮助！

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

P.S. I am trying to put as much code as possible in XAML, so I'd prefer that approach, but really, if there's anything to improve this...

推荐答案

使用缓动函数，一个简单的 DoubleAnimation 和 RenderTransform，例如

Use easing functions, a simple DoubleAnimation and RenderTransform, e.g.

<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 should be quite smooth, check out this overview on easing functions to get an idea of how they affect the animation.

另请注意，持续时间对动画的外观有很大影响，这取决于您使用的缓动函数设置高持续时间值，因为它们最终会显着减慢.

Also note that the duration has a strong effect on what an animation looks like, depending on what easing function you use setting high duration values is needed because they slow down significantly at the end.

这篇关于提高动画平滑度(控件的移动)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！