Funções de suavização

As funções de easing permitem que você aplique fórmulas matemáticas personalizadas às suas animações. Por exemplo, talvez você queira que um objeto salte ou se comporte de forma realista como se estivesse em uma mola. Você pode usar Key-Frame ou até mesmo animações de/para/Por para aproximar esses efeitos, mas seria necessário uma quantidade significativa de trabalho e a animação seria menos precisa do que usar uma fórmula matemática.

Além de criar sua própria função de easing personalizada herdando de EasingFunctionBase, você pode usar uma das diversas funções de easing fornecidas pelo ambiente de execução para criar efeitos comuns.

• BackEase: retrai o movimento de uma animação pouco antes de iniciar a animação no caminho indicado.

• BounceEase: cria um efeito de salto.

• CircleEase: cria uma animação que acelera e/ou desacelera usando uma função circular.

• CubicEase: cria uma animação que acelera e/ou desacelera usando a fórmula f(t) = t³.

• ElasticEase: cria uma animação que se assemelha a uma mola balançando para frente e para trás até parar.

• ExponentialEase: cria uma animação que acelera e/ou desacelera usando uma fórmula exponencial.

• PowerEase: cria uma animação que acelera e/ou desacelera usando a fórmula f(t) = t^p em que p é igual à Power propriedade.

• QuadraticEase: cria uma animação que acelera e/ou desacelera usando a fórmula f(t) = t².

• QuarticEase: cria uma animação que acelera e/ou desacelera usando a fórmula f(t) = t⁴.

• QuinticEase: crie uma animação que acelere e/ou desacelere usando a fórmula f(t) = t⁵.

• SineEase: cria uma animação que acelera e/ou desacelera usando uma fórmula de seno.

Para aplicar uma função de easing a uma animação, use a EasingFunction propriedade da animação especifique a função de easing a ser aplicada à animação. O exemplo a seguir aplica uma BounceEase função de easing a um DoubleAnimation para criar um efeito de salto.

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

No exemplo anterior, a função de suavização foi aplicada a uma animação De/Para/Por. Você também pode aplicar essas funções de easing a animações de Key-Frame. O exemplo a seguir mostra como usar quadros-chave com funções de easing associadas a eles para criar uma animação de um retângulo que se contrai para cima, desacelera, depois se expande para baixo (como se estivesse caindo) e, em seguida, salta para uma parada.

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

Você pode usar a EasingMode propriedade para alterar como a função easing se comporta, ou seja, alterar a forma como a animação é interpolada. Há três valores possíveis que você pode dar para EasingMode:

• EaseIn: A interpolação segue a fórmula matemática associada à função de suavização.

• EaseOut: A interpolação segue 100% menos o resultado da fórmula associada à função de suavização.

• EaseInOut: a interpolação usa EaseIn para a primeira metade da animação e EaseOut para o segundo semestre.

Os grafos abaixo demonstram os valores diferentes de EasingMode onde f(x) representa o progresso da animação e t representa o tempo.

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

PowerEase

QuadraticEase

QuarticEase

QuinticEase

SineEase

Além de usar as funções de easing incluídas no tempo de execução, você pode criar suas próprias funções de easing personalizadas herdando de EasingFunctionBase. O exemplo a seguir demonstra como criar uma função de easing personalizada simples. Você pode adicionar sua própria lógica matemática de como a função de easing se comporta substituindo o 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>