Funções de atenuação
Funções de atenuação permitem aplicar as animações personalizadas fórmulas matemáticas. Por exemplo, convém a um objeto para realisticamente Elástico ou se comportam como se fosse em uma mola. Você poderia usar o quadro-chave ou até mesmo de/para/por animações para aproximar estes efeitos mas levaria a uma quantidade significativa de trabalho e a animação poderia ser menos precisa do que usar uma fórmula matemática.
Além de criar sua própria função de atenuação personalizada por herança de EasingFunctionBase, você pode usar uma das várias funções de atenuação fornecidas pelo runtime para criar efeitos comuns.
BackEase: Cancela o movimento de uma animação de um pouco antes do início animar no caminho indicado.
BounceEase: Cria um efeito saltitante.
CircleEase: Cria uma animação que acelera e/ou é desacelerada usando uma função circular.
CubicEase: Cria uma animação que acelera e/ou é desacelerada usando a fórmula f(t) = t3.
ElasticEase: Cria uma animação que se assemelha a uma mola oscillating e para trás até que ele é fornecido para o resto.
ExponentialEase: Cria uma animação que acelera e/ou é desacelerada usando uma fórmula exponencial.
PowerEase: Cria uma animação que acelera e/ou é desacelerada usando a fórmula f(t) = tp onde p é igual a Power propriedade.
QuadraticEase: Cria uma animação que acelera e/ou é desacelerada usando a fórmula f(t) = t2.
QuarticEase: Cria uma animação que acelera e/ou é desacelerada usando a fórmula f(t) = t4.
QuinticEase: Criar uma animação que acelera e/ou é desacelerada usando a fórmula f(t) = t5.
SineEase: Cria uma animação que acelera e/ou é desacelerada usando uma fórmula do seno.
Você pode explorar o comportamento dessas funções de atenuação com o exemplo a seguir.
Para aplicar uma função de atenuação a uma animação, use o EasingFunction a propriedade da animação especificar a função de atenuação para aplicar a animação. O exemplo seguinte aplica uma BounceEase a atenuação de função para um DoubleAnimation para criar um efeito saltitante.
<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 para uma de/para/por animação. Você também pode aplicar essas funções de atenuação para animações quadro-chave. O exemplo a seguir mostra como usar quadros-chave com a atenuação funções associadas a eles para criar uma animação de um retângulo que contratos para cima, mais lento, e em seguida, expande para baixo (que caindo) e, em seguida, a balança 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 o EasingMode alteração de propriedade para alterar a função de atenuação comportamento, isto é, como a animação interpola. Há três valores possíveis, você pode fornecer para EasingMode:
EaseIn: Interpolação segue a fórmula matemática associada com a função de atenuação.
EaseOut: Interpolação segue a interpolação de 100% a menos que a saída da fórmula associada com a função de atenuação.
EaseInOut: Usos de interpolação EaseIn para a primeira metade da animação e EaseOut para o segundo semestre.
Os gráficos abaixo demonstram os diferentes valores de EasingMode onde f(x) representa o progresso da animação e t representa o tempo.
.png "Gráficos EasingMode de BackEase.")
.png "Gráficos EasingMode de BounceEase.")
.png "Gráficos EasingMode de CircleEase.")
.png "Gráficos EasingMode de CubicEase.")
.png "ElasticEase com gráficos de diferentes easingmodes.")
.png "Gráficos de ExponentialEase de diferentes easingmodes.")
.png "QuarticEase com gráficos de diferentes easingmodes.")
.png "QuadraticEase com gráficos de diferentes easingmodes")
.png "SineEase para diferentes valores de EasingMode")
Observação
Você pode usar PowerEase para criar o mesmo comportamento CubicEase, QuadraticEase, QuarticEase, e QuinticEase usando o Power propriedade.Por exemplo, se você deseja usar PowerEase para substituir CubicEase, especificar um Power valor 3.
Para 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 personalizadas de atenuação herdando EasingFunctionBase. O exemplo a seguir demonstra como criar uma função de atenuação personalizada simple. Você pode adicionar sua própria lógica mathematical para como a função de atenuação se comporta, substituindo o EaseInCore método.
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
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();
}
}
}
<Window x:Class="CustomEasingFunction.Window1"
xmlns:CustomEase="clr-namespace:CustomEasingFunction"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>