Zwalnianie funkcji
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 wiosnę. Możesz użyć animacji Key-Frame, a nawet From/To/By, aby przybliżyć te efekty, 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 przez dziedziczenie z EasingFunctionBaseprogramu można użyć jednej z kilku funkcji ułatwiania zapewnianych przez środowisko uruchomieniowe w celu utworzenia typowych efektów.
BackEase: Wycofuje 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ą tam iz powrotem, aż do odpoczynku.
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) = t p, gdzie p jest równe Power właściwości.
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 EasingFunction właściwości animacji, aby określić funkcję złagodzenia, aby zastosować do animacji. Poniższy przykład stosuje BounceEase funkcję złagodzenia do DoubleAnimation elementu 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 klatek kluczowych. W poniższym przykładzie pokazano, jak używać klatek kluczowych z funkcjami złagodzenia skojarzonymi z nimi w celu utworzenia animacji prostokąta, który kontraktuje w górę, spowalnia, a następnie rozwija 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>
Za pomocą EasingMode właściwości można zmienić sposób działania funkcji złagodzenia, czyli zmienić sposób interpolacji animacji. Istnieją trzy możliwe wartości, które można nadać dla EasingModeelementu :
EaseIn: Interpolacja jest zgodna z formułą matematyczną skojarzona z funkcją złagodzenia.
EaseOut: Interpolacja następuje po 100% interpolacji pomniejszonej o dane wyjściowe formuły skojarzonej z funkcją złagodzenia.
EaseInOut: Interpolacja używa EaseIn w pierwszej połowie animacji i EaseOut w drugiej połowie.
Poniższe wykresy pokazują różne wartości EasingMode , w których f(x) reprezentuje postęp animacji i t reprezentuje czas.
Uwaga
Możesz użyć PowerEase polecenia , aby utworzyć to samo zachowanie co CubicEase, QuadraticEase, QuarticEasei QuinticEase za pomocą Power właściwości . Jeśli na przykład chcesz użyć PowerEase polecenia , aby zastąpić CubicEasewartość , określ Power wartość 3.
Oprócz korzystania z funkcji ułatwiania korzystania z funkcji uwzględnionych w czasie wykonywania można utworzyć własne niestandardowe funkcje złagodzenia, dziedzicząc z EasingFunctionBaseklasy . 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
Opinia
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla