Fungsi Permudah
Fungsi kemudahan memungkinkan Anda menerapkan rumus matematika kustom ke animasi Anda. Misalnya, Anda mungkin ingin objek terpental secara realistis atau berulah seolah-olah berada di musim semi. Anda dapat menggunakan animasi Key-Frame atau bahkan Dari/Ke/Oleh untuk mempertanyakan efek ini tetapi akan membutuhkan sejumlah besar pekerjaan dan animasi akan kurang akurat daripada menggunakan rumus matematika.
Selain membuat fungsi pelinggihan kustom Anda sendiri dengan mewarisi dari EasingFunctionBase, Anda dapat menggunakan salah satu dari beberapa fungsi pelingan yang disediakan oleh runtime untuk membuat efek umum.
BackEase: Menarik kembali gerakan animasi sedikit sebelum mulai menganimasikan di jalur yang ditunjukkan.
BounceEase: Membuat efek memantul.
CircleEase: Membuat animasi yang mempercepat dan/atau mempercepat menggunakan fungsi melingkar.
CubicEase: Membuat animasi yang mempercepat dan/atau mempercepat menggunakan rumus f(t) = t3.
ElasticEase: Membuat animasi yang menyerupan musim semi berosilasi bolak-balik sampai berhenti.
ExponentialEase: Membuat animasi yang mempercepat dan/atau mempercepat menggunakan rumus eksponensial.
PowerEase: Membuat animasi yang mempercepat dan/atau mempercepat menggunakan rumus f(t) = tp di mana p sama dengan Power properti.
QuadraticEase: Membuat animasi yang mempercepat dan/atau mempercepat menggunakan rumus f(t) = t2.
QuarticEase: Membuat animasi yang mempercepat dan/atau mempercepat menggunakan rumus f(t) = t4.
QuinticEase: Buat animasi yang mempercepat dan/atau mempercepat menggunakan rumus f(t) = t5.
SineEase: Membuat animasi yang mempercepat dan/atau mempercepat menggunakan rumus sinus.
Untuk menerapkan fungsi penguraian ke animasi, gunakan EasingFunction properti animasi tentukan fungsi kemudahan untuk diterapkan ke animasi. Contoh berikut menerapkan BounceEase fungsi pelingan ke DoubleAnimation untuk membuat efek memantul.
<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>
Dalam contoh sebelumnya, fungsi pelingan diterapkan ke animasi Dari/Ke/Menurut. Anda juga dapat menerapkan fungsi-fungsi penguraian ini ke animasi Key-Frame. Contoh berikut menunjukkan cara menggunakan bingkai kunci dengan fungsi pelinggihan yang terkait dengannya untuk membuat animasi persegi panjang yang berkontraksi ke atas, melambat, lalu meluas ke bawah (seolah-olah jatuh) dan kemudian memantul ke berhenti.
<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>
Anda dapat menggunakan EasingMode properti untuk mengubah perilaku fungsi pelanggaran, yaitu mengubah bagaimana animasi menginterpolasi. Ada tiga kemungkinan nilai yang dapat Anda berikan untuk EasingMode:
EaseIn: Interpolasi mengikuti rumus matematika yang terkait dengan fungsi pengurangan.
EaseOut: Interpolasi mengikuti interpolasi 100% dikurangi output rumus yang terkait dengan fungsi pengurangan.
EaseInOut: Interpolasi menggunakan EaseIn untuk paruh pertama animasi dan EaseOut untuk paruh kedua.
Grafik di bawah ini menunjukkan nilai yang berbeda di EasingMode mana f(x) mewakili kemajuan animasi dan t mewakili waktu.
Catatan
Anda dapat menggunakan PowerEase untuk membuat perilaku yang sama dengan CubicEase, , QuarticEaseQuadraticEase, dan QuinticEase dengan menggunakan Power properti . Misalnya, jika Anda ingin menggunakan PowerEase untuk mengganti CubicEase, tentukan Power nilai 3.
Selain menggunakan fungsi pelinggihan yang disertakan dalam run-time, Anda dapat membuat fungsi pelinggihan kustom Anda sendiri dengan mewarisi dari EasingFunctionBase. Contoh berikut menunjukkan cara membuat fungsi pengurangan kustom sederhana. Anda dapat menambahkan logika matematika Anda sendiri tentang bagaimana fungsi pelinggihan bereaksi dengan mengesampingkan EaseInCore metode .
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