Funkcje wygładzające
Funkcje złagodzenia umożliwiają stosowanie niestandardowych formuł matematycznych do animacji. Na przykład możesz chcieć, aby obiekt realistycznie odbijał się lub zachowywał się tak, jakby był na sprężynie. Aby przybliżyć te efekty, można użyć Key-Frame, a nawet animacji From/To/By, ale zajęłoby to znaczną ilość pracy, a animacja byłaby mniej dokładna niż użycie formuły matematycznej.
Oprócz tworzenia własnej niestandardowej funkcji złagodzenia, dziedzicząc po EasingFunctionBase, możesz użyć jednej z kilku funkcji ułatwiania zapewnianych przez środowisko uruchomieniowe, aby tworzyć typowe efekty.
BackEase: Cofnie ruch animacji nieco przed rozpoczęciem animowania w wskazanej ścieżce.
BounceEase: tworzy efekt odbijający.
CircleEase: tworzy animację, która przyspiesza i/lub zwalnia przy użyciu funkcji cyklicznej.
CubicEase: tworzy animację, która przyspiesza i/lub zwalnia przy użyciu formuły f(t) = t3.
ElasticEase: Tworzy animację przypominającą sprężynę oscylującą w przód i w tył, aż do zatrzymania się.
ExponentialEase: tworzy animację, która przyspiesza i/lub zwalnia przy użyciu formuły wykładniczej.
PowerEase: tworzy animację, która przyspiesza i/lub zwalnia przy użyciu formuły f(t) = tp gdzie p jest równa właściwości Power.
QuadraticEase: tworzy animację, która przyspiesza i/lub zwalnia przy użyciu formuły f(t) = t2.
QuarticEase: tworzy animację, która przyspiesza i/lub zwalnia przy użyciu formuły f(t) = t4.
QuinticEase: utwórz animację, która przyspiesza i/lub zwalnia przy użyciu formuły f(t) = t5.
SineEase: tworzy animację, która przyspiesza i/lub zwalnia przy użyciu formuły sinusu.
Aby zastosować funkcję złagodzenia do animacji, użyj właściwości EasingFunction, aby określić funkcję złagodzenia dla animacji. Poniższy przykład stosuje funkcję złagodzenia BounceEase do DoubleAnimation w celu utworzenia efektu odbijającego.
<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>
W poprzednim przykładzie funkcja easing została zastosowana do animacji From/To/By. Można również zastosować te funkcje złagodzenia do animacji Key-Frame. W poniższym przykładzie pokazano, jak używać klatek kluczowych z przypisanymi funkcjami złagodzenia do utworzenia animacji prostokąta, który kurczy się w górę, spowalnia, a następnie rozszerza się w dół (jakby spadał), a następnie odbija się do zatrzymania.
<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>
Możesz użyć właściwości EasingMode, aby zmienić sposób zachowania funkcji złagodzenia, czyli zmienić sposób interpolacji animacji. Istnieją trzy możliwe wartości, które można nadać dla EasingMode:
EaseIn: Interpolacja jest zgodna z formułą matematyczną skojarzona z funkcją złagodzenia.
EaseOut: Interpolacja wynika z pomniejszenia 100% interpolacji o wynik działania formuły związanej z funkcją wygładzania.
EaseInOut: Interpolacja używa EaseIn w pierwszej połowie animacji i EaseOut w drugiej połowie.
Na poniższych wykresach przedstawiono różne wartości EasingMode, w których f(x) reprezentuje postęp animacji, a t reprezentuje czas.
Notatka
Za pomocą PowerEase można utworzyć takie samo zachowanie jak CubicEase, QuadraticEase, QuarticEasei QuinticEase przy użyciu właściwości Power. Jeśli na przykład chcesz użyć PowerEase do zastąpienia CubicEase, określ Power wartość 3.
Oprócz korzystania z funkcji łagodzenia dostępnych w środowisku uruchomieniowym, można tworzyć własne niestandardowe funkcje łagodzenia, dziedzicząc z EasingFunctionBase. W poniższym przykładzie pokazano, jak utworzyć prostą niestandardową funkcję złagodzenia. Możesz dodać własną logikę matematyczną, aby dowiedzieć się, jak działa funkcja złagodzenia, przesłaniając metodę 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>
.NET Desktop feedback