Funções de suavização

As funções de atenuação permitem-lhe aplicar fórmulas matemáticas personalizadas às suas animações. Por exemplo, você pode querer que um objeto salte realisticamente ou se comporte como se estivesse em uma mola. Você poderia usar animações Key-Frame ou até mesmo From/To/By para aproximar esses efeitos, mas isso exigiria uma quantidade significativa de trabalho e a animação seria menos precisa do que usar uma fórmula matemática.

Além de criar a sua própria função de flexibilização personalizada herdando de EasingFunctionBase, pode usar uma das várias funções de flexibilização fornecidas pelo tempo de execução para criar efeitos comuns.

• BackEase: Retrai ligeiramente o movimento de uma animação antes de começar a executar 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 onde 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 seno.

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

<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 atenuação foi aplicada a uma animação De/Para/Por. Você também pode aplicar essas funções de flexibilização a animações Key-Frame. O exemplo a seguir mostra como usar quadros-chave com funções de suavização associadas a eles para criar uma animação de um retângulo que se contrai para cima, diminui a velocidade, depois se expande para baixo (como se estivesse a cair) e, em seguida, quica até parar.

<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 de flexibilização se comporta, ou seja, alterar como a animação interpola. 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 flexibilização.

• EaseOut: A interpolação segue a interpolação de 100% menos a saída da fórmula associada à função de easing.

• EaseInOut: Interpolação usa EaseIn para a primeira metade da animação e EaseOut para a segunda metade.

Os gráficos abaixo demonstram os diferentes valores de onde EasingMode(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 atenuação incluídas no tempo de execução, você pode criar suas próprias funções de flexibilização personalizadas herdando de EasingFunctionBase. O exemplo a seguir demonstra como criar uma função de flexibilização personalizada simples. Você pode adicionar sua própria lógica matemática para como a função de flexibilização se comporta substituindo o EaseInCore método.

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>