Funciones de aceleración

Las funciones de aceleración permiten aplicar fórmulas matemáticas personalizadas a las animaciones. Por ejemplo, puede que desee que un objeto rebote o se comporte de forma realista como si estuviera en un muelle. Puedes usar Key-Frame o incluso animaciones From/To/By para aproximar estos efectos, pero tomaría una cantidad significativa de trabajo y la animación sería menos precisa que usar una fórmula matemática.

Además de crear su propia función de aceleración personalizada heredando de EasingFunctionBase, puede usar una de varias funciones de aceleración proporcionadas por el tiempo de ejecución para crear efectos comunes.

• BackEase: retira el movimiento de una animación ligeramente antes de que comience a animarse en la ruta indicada.

• BounceEase: crea un efecto de rebote.

• CircleEase: crea una animación que acelera o ralentiza mediante una función circular.

• CubicEase: crea una animación que acelera o ralentiza mediante la fórmula f(t) = t³.

• ElasticEase: crea una animación similar a un resorte oscilando hacia atrás y hacia adelante hasta que llega a descansar.

• ExponentialEase: crea una animación que acelera o ralentiza mediante una fórmula exponencial.

• PowerEase: crea una animación que acelera o descelera utilizando la fórmula f(t) = t^p donde p es igual a la Power propiedad .

• QuadraticEase: crea una animación que acelera o descelera mediante la fórmula f(t) = t².

• QuarticEase: crea una animación que acelera o ralentiza mediante la fórmula f(t) = t⁴.

• QuinticEase: cree una animación que acelere o descelere mediante la fórmula f(t) = t⁵.

• SineEase: Crea una animación que acelera y/o desacelera mediante una fórmula de seno.

Para aplicar una función de aceleración a una animación, use la EasingFunction propiedad de la animación especifica la función de aceleración que se va a aplicar a la animación. En el ejemplo siguiente se aplica una BounceEase función de aceleración a DoubleAnimation para crear un efecto de rebote.

<Rectangle Name="myRectangle" Width="200" Height="30" Fill="Blue">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseDown">
            <BeginStoryboard>
                <Storyboard>
                    <Storyboard x:Name="myStoryboard">
                        <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                         Storyboard.TargetName="myRectangle" 
                         Storyboard.TargetProperty="Height">
                            <DoubleAnimation.EasingFunction>
                                <BounceEase Bounces="2" EasingMode="EaseOut" 
                                 Bounciness="2" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>

En el ejemplo anterior, la función de aceleración se aplicó a una animación From/To/By. También puedes aplicar estas funciones de suavizado a las animaciones de Key-Frame. En el ejemplo siguiente se muestra cómo usar fotogramas clave con funciones de aceleración asociadas para crear una animación de un rectángulo que se contrae hacia arriba, disminuye la velocidad, luego se expande hacia abajo (como si estuviera cayendo) y finalmente rebota hasta detenerse.

<Rectangle Name="myRectangle" Width="200" Height="200" Fill="Blue">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames
                     Storyboard.TargetProperty="Height"
                     Storyboard.TargetName="myRectangle">

                        <!-- This keyframe animates the ellipse up to the crest 
                             where it slows down and stops. -->
                        <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <CubicEase EasingMode="EaseOut"/>
                            </EasingDoubleKeyFrame.EasingFunction>
                        </EasingDoubleKeyFrame>

                        <!-- This keyframe animates the ellipse back down and makes
                             it bounce. -->
                        <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <BounceEase Bounces="5" EasingMode="EaseOut"/>
                            </EasingDoubleKeyFrame.EasingFunction>
                        </EasingDoubleKeyFrame>

                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>

</Rectangle>

Puede usar la EasingMode propiedad para alterar el comportamiento de la función de suavizado, es decir, cambiar cómo la animación interpola. Hay tres valores posibles que puede proporcionar para EasingMode:

• EaseIn: la interpolación sigue la fórmula matemática asociada a la función de aceleración.

• EaseOut: la interpolación se realiza como 100 interpolaciones% menos la salida de la fórmula asociada a la función de aceleración.

• EaseInOut: la interpolación usa EaseIn para la primera mitad de la animación y EaseOut para la segunda mitad.

Los gráficos siguientes muestran los distintos valores de EasingMode donde f(x) representa el progreso de la animación y t representa el tiempo.

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

PowerEase

QuadraticEase

QuarticEase

QuinticEase

SineEase

Nota:

Puede usar PowerEase para crear el mismo comportamiento que CubicEase, QuadraticEase, QuarticEasey QuinticEase mediante la Power propiedad . Por ejemplo, si desea usar PowerEase para sustituir CubicEasepor , especifique un Power valor de 3.

Además de usar las funciones de aceleración incluidas en tiempo de ejecución, puede crear sus propias funciones de aceleración personalizadas heredando de EasingFunctionBase. En el ejemplo siguiente se muestra cómo crear una función de suavización sencilla y personalizada. Puede agregar su propia lógica matemática para cómo se comporta la función de aceleración sobrescribiendo el método EaseInCore.

namespace CustomEasingFunction
{
    public class CustomSeventhPowerEasingFunction : EasingFunctionBase
    {
        public CustomSeventhPowerEasingFunction()
            : base()
        {
        }

        // Specify your own logic for the easing function by overriding
        // the EaseInCore method. Note that this logic applies to the "EaseIn"
        // mode of interpolation.
        protected override double EaseInCore(double normalizedTime)
        {
            // applies the formula of time to the seventh power.
            return Math.Pow(normalizedTime, 7);
        }

        // Typical implementation of CreateInstanceCore
        protected override Freezable CreateInstanceCore()
        {

            return new CustomSeventhPowerEasingFunction();
        }
    }
}

Namespace CustomEasingFunction
    Public Class CustomSeventhPowerEasingFunction
        Inherits EasingFunctionBase
        Public Sub New()
            MyBase.New()
        End Sub

        ' Specify your own logic for the easing function by overriding
        ' the EaseInCore method. Note that this logic applies to the "EaseIn"
        ' mode of interpolation. 
        Protected Overrides Function EaseInCore(ByVal normalizedTime As Double) As Double
            ' applies the formula of time to the seventh power.
            Return Math.Pow(normalizedTime, 7)
        End Function

        ' Typical implementation of CreateInstanceCore
        Protected Overrides Function CreateInstanceCore() As Freezable

            Return New CustomSeventhPowerEasingFunction()
        End Function

    End Class
End Namespace

<Window x:Class="CustomEasingFunction.Window1"
        xmlns:CustomEase="clr-namespace:CustomEasingFunction"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="500" Width="300">
    <StackPanel>
        <TextBlock Margin="10" TextWrapping="Wrap">Click on the rectangle to start the animation</TextBlock>
        <StackPanel x:Name="LayoutRoot" Background="White">

            <Rectangle Name="myRectangle" Width="200" Height="30" Fill="Blue">
                <Rectangle.Triggers>
                    <EventTrigger RoutedEvent="Rectangle.MouseDown">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation From="30" To="300" Duration="00:00:3" 
                                 Storyboard.TargetName="myRectangle" 
                                 Storyboard.TargetProperty="Height">
                                    <DoubleAnimation.EasingFunction>

                                        <!-- You get the EasingMode property for free on your custom
                                             easing function.-->
                                        <CustomEase:CustomSeventhPowerEasingFunction EasingMode="EaseIn"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>

            </Rectangle>

        </StackPanel>
    </StackPanel>

</Window>