mejorar la suavidad de la animación (movimiento de los controles)

Question

que han aplicado la animación del movimiento de un control de la red de la siguiente manera:

<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> 

La animación trabaja muy bien, pero es feo. Es tembloroso/nervioso/espasmódico y realmente parece poco profesional. ¿Hay alguna manera de mejorar esto? ¿Estoy usando el enfoque correcto para animar el cambio de valor en la propiedad Margin para mover la cuadrícula? He leído sobre RenderTransform, pero no sé cómo usarlo en mi caso.

Además, la animación no es natural. Sé que esto se puede mejorar, pero no sé cómo. ¿Cuáles son estas propiedades y pueden ayudarme a mejorar mi animación:

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

¡Gracias por ayudarme!

P.S. Estoy tratando de poner la mayor cantidad de código posible en XAML, por lo que preferiría ese enfoque, pero en realidad, si hay algo para mejorar esto ...

Answer 1

Utilice funciones de aceleración, una simple DoubleAnimation y RenderTransform, p.

<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> 

Esto debería ser bastante suave, echa un vistazo a this overview en funciones de aceleración para tener una idea de cómo afectan a la animación.

También tenga en cuenta que la duración tiene un fuerte efecto sobre cómo se ve una animación, dependiendo de qué función de suavizado utilice estableciendo valores de alta duración porque se ralentizan significativamente al final.