Funkce usnadnění
Funkce pro usnadnění umožňují použít vlastní matematické vzorce na animace. Můžete například chtít, aby se objekt realisticky odrazil nebo se choval, jako by byl na jaře. K odhadu těchto efektů byste mohli použít snímky kláves nebo dokonce od/do/podle, ale trvalo by to značné množství práce a animace by byla méně přesná než použití matematického vzorce.
Kromě vytváření vlastních funkcí easingu zdědíte z EasingFunctionBasenich můžete použít jednu z několika funkcí pro usnadnění, které poskytuje modul runtime, a vytvořit tak běžné efekty.
BackEase: Stáhne pohyb animace mírně předtím, než začne animovat v vyznačené cestě.
BounceEase: Vytvoří efekt odrazu.
CircleEase: Vytvoří animaci, která zrychluje a/nebo zmenšuje pomocí kruhové funkce.
CubicEase: Vytvoří animaci, která zrychluje a/nebo se zmenšuje pomocí vzorce f(t) = t3.
ElasticEase: Vytvoří animaci, která se podobá pružině oscilující zpět a zpět, dokud nepřijde na zbytek.
ExponentialEase: Vytvoří animaci, která zrychluje a/nebo deceleruje pomocí exponenciálního vzorce.
PowerEase: Vytvoří animaci, která zrychluje a/nebo deceleruje pomocí vzorce f(t) = t p, kde p se rovná Power vlastnosti.
QuadraticEase: Vytvoří animaci, která zrychluje a/nebo deceleruje pomocí vzorce f(t) = t2.
QuarticEase: Vytvoří animaci, která zrychluje a/nebo se zmenšuje pomocí vzorce f(t) = t4.
QuinticEase: Vytvořte animaci, která zrychluje a/nebo se zmenšuje pomocí vzorce f(t) = t5.
SineEase: Vytvoří animaci, která urychlí nebo zrychlí pomocí sinusového vzorce.
Pokud chcete u animace použít funkci usnadnění, použijte EasingFunction vlastnost animace a určete funkci easingu, která se má použít na animaci. Následující příklad použije BounceEase funkci DoubleAnimation pro usnadnění vytvoření efektu odrazu.
<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>
V předchozím příkladu byla funkce easing použita na animaci From/To/By. Tyto funkce můžete také použít pro animace s klíčovými snímky. Následující příklad ukazuje, jak pomocí klíčových snímků s funkcemi usnadněním přidruženými k nim vytvořit animaci obdélníku, který se zpomalí, zpomalí, pak se rozbalí dolů (jako když padá) a pak se odrazí na zarážku.
<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>
Vlastnost můžete použít EasingMode ke změně chování funkce pro usnadnění, tedy ke změně způsobu interpolace animace. Existují tři možné hodnoty, které můžete zadat:EasingMode
EaseIn: Interpolace se řídí matematickým vzorcem přidruženým k usnadnění funkce.
EaseOut: Interpolace následuje 100% interpolace minus výstup vzorce přidruženého k funkci usnadnění.
EaseInOut: Interpolace se používá EaseIn pro první polovinu animace a EaseOut druhou polovinu.
Následující grafy ukazují různé hodnoty, ve kterých EasingModef(x) představuje průběh animace a t představuje čas.
Poznámka:
Můžete použít PowerEase k vytvoření stejného chování jako CubicEase, QuadraticEase, QuarticEasea QuinticEase pomocí Power vlastnosti. Pokud chcete například použít PowerEase k nahrazení CubicEase, zadejte Power hodnotu 3.
Kromě použití funkcí pro usnadnění, které jsou součástí běhu, můžete vytvořit vlastní easing funkce tím, že zdědíte z EasingFunctionBase. Následující příklad ukazuje, jak vytvořit jednoduchou vlastní funkci easing. Můžete přidat vlastní matematickou logiku, jak se funkce easing chová přepsáním EaseInCore metody.
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
Váš názor
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu: https://aka.ms/ContentUserFeedback.
Odeslat a zobrazit názory pro