Lättnadsfunktioner
Med hjälp av hjälpfunktioner kan du använda anpassade matematiska formler för dina animeringar. Du kanske till exempel vill att ett objekt ska studsa realistiskt eller bete sig som om det vore på en fjäder. Du kan använda Key-Frame eller till och med från/till/av-animeringar för att uppskatta dessa effekter, men det skulle krävas en betydande mängd arbete och animeringen skulle vara mindre exakt än att använda en matematisk formel.
Förutom att skapa en egen anpassad taktfunktion genom att ärva från EasingFunctionBase, kan du använda en av flera taktfunktioner som tillhandahålls av runtime-miljön för att skapa vanliga effekter.
BackEase: Drar tillbaka en animeringsrörelse lite grann innan den börjar animera i den angivna sökvägen.
BounceEase: Skapar en studsande effekt.
CircleEase: Skapar en animering som accelererar och/eller saktar in med hjälp av en cirkulär funktion.
CubicEase: Skapar en animering som accelererar och/eller saktar in med formeln f(t) = t3.
ElasticEase: Skapar en animering som liknar en fjäder som oscillerar fram och tillbaka tills den kommer till vila.
ExponentialEase: Skapar en animering som accelererar och/eller saktar in med hjälp av en exponentiell formel.
PowerEase: Skapar en animering som accelererar och/eller saktar in med formeln f(t) = tp där p är lika med egenskapen Power.
QuadraticEase: Skapar en animering som accelererar och/eller saktar in med formeln f(t) = t2.
QuarticEase: Skapar en animering som accelererar och/eller saktar in med formeln f(t) = t4.
QuinticEase: Skapa en animering som accelererar och/eller saktar in med formeln f(t) = t5.
SineEase: Skapar en animering som accelererar och/eller saktar in med hjälp av en sinusformel.
Om du vill använda en lättnadsfunktion för en animering använder du egenskapen EasingFunction för animeringen och anger vilken lättnadsfunktion som ska tillämpas på animeringen. I följande exempel tillämpas en BounceEase lättnadsfunktion på en DoubleAnimation för att skapa en studsande effekt.
<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>
I föregående exempel tillämpades lättnadsfunktionen på en From/To/By-animering. Du kan också använda dessa inbromsningsfunktioner på Key-Frame-animeringar. I följande exempel visas hur du använder nyckelramar med easingfunktioner som är associerade med dem för att skapa en animering av en rektangel som drar ihop sig uppåt, saktar ned och sedan expanderar nedåt (som om den faller) och sedan studsar tills den stannar.
<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>
Du kan använda egenskapen EasingMode för att ändra hur lättningsfunktionen fungerar, det vill s.v.s. ändra hur animeringen interpolerar. Det finns tre möjliga värden som du kan ange för EasingMode:
EaseIn: Interpolationen följer den matematiska formel som är kopplad till easing-funktionen.
EaseOut: Interpolationen följer 100% interpolation minus utdata från formeln som är associerad med lättnadsfunktionen.
EaseInOut: Interpolation använder EaseIn för den första halvan av animeringen och EaseOut för den andra halvleken.
Graferna nedan visar de olika värdena för EasingMode där f(x) representerar animeringens förlopp och t representerar tid.
sv-SE: 
Notis
Du kan använda PowerEase för att skapa samma beteende som CubicEase, QuadraticEase, QuarticEaseoch QuinticEase med hjälp av egenskapen Power. Om du till exempel vill använda PowerEase som ersättning för CubicEaseanger du ett Power värde på 3.
Förutom att använda de lättnadsfunktioner som ingår i körningen kan du skapa egna anpassade lättnadsfunktioner genom att ärva från EasingFunctionBase. I följande exempel visas hur du skapar en enkel anpassad lättningsfunktion. Du kan lägga till din egen matematiska logik för hur lättnadsfunktionen fungerar genom att åsidosätta metoden 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