Улучшение плавности анимации (перемещение элементов управления)

я реализовал анимацию перемещения элемента управления "сетка" следующим образом: 

<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, так что я предпочитаю такой подход, но на самом деле, если есть что улучшить это...

7
wpf xaml

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>

Это должно быть довольно гладко, проверить обзор о функции замедления, чтобы получить представление о том, как они влияют на анимацию.

также обратите внимание, что длительность сильно влияет на то, как выглядит анимация, в зависимости от того, какую функцию смягчения вы используете, чтобы установить высокие значения длительности, потому что они значительно замедляются в конце.

11