イージング関数を使用すると、アニメーションにカスタム数式を適用できます。 たとえば、オブジェクトを現実的に跳ねさせたり、バネの上にあるかのように動かしたりすることができます。 Key-Frame または From/To/By アニメーションを使用してこれらの効果を近似することもできますが、かなりの時間がかかり、数式を使用するよりもアニメーションの精度が低下します。
EasingFunctionBaseから継承して独自のカスタム イージング関数を作成するだけでなく、ランタイムによって提供されるいくつかのイージング関数のいずれかを使用して、一般的な効果を作成できます。
BackEase: 指定されたパスでアニメーション化を開始する少し前に、アニメーションのモーションを取り消します。
BounceEase: バウンス効果を作成します。
CircleEase: 循環関数を使用して加速または減速するアニメーションを作成します。
CubicEase: 数式 f(t) = t3を使用して、加速または減速するアニメーションを作成します。
ElasticEase: 静止するまで前後に振れるバネのようなアニメーションを作成します。
ExponentialEase: 指数式を使用して加速または減速するアニメーションを作成します。
: f( t ) =t p (p がプロパティと等しい) 数式を使用して加速または減速するアニメーションを作成します。 QuadraticEase: 数式 f(t) = t2 を使用して、加速や減速するアニメーションを作成します。
QuarticEase: 数式 を使用して、加速または減速するアニメーションを作成します。f(t) = t4。
QuinticEase: 数式 f(t) = t5を使用して、加速または減速するアニメーションを作成します。
SineEase: 正弦数式を使用して加速または減速するアニメーションを作成します。
アニメーションにイージング関数を適用するには、アニメーションの EasingFunction プロパティを使用して、アニメーションに適用するイージング関数を指定します。 次の例では、BounceEase イージング関数を DoubleAnimation に適用してバウンス効果を作成します。
<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>
前の例では、イージング関数が From/To/By アニメーションに適用されました。 これらのイージング関数を Key-Frame アニメーションに適用することもできます。 次の例では、キー フレームに関連付けられたイージング関数を使用して、上向きに縮小し、減速し、(落下するかのように) 下に展開し、停止にバウンスする四角形のアニメーションを作成する方法を示します。
<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>
EasingMode プロパティを使用すると、イージング関数の動作を変更できます。つまり、アニメーションの補間方法を変更できます。 EasingModeには、次の 3 つの値を指定できます。
次のグラフは、EasingMode のさまざまな値を示しています。ここで、f(x) はアニメーションの進行状況を表し、t は時間を表します。
BackEase EasingMode グラフを 
CircleEase EasingMode グラフを 
さまざまなイージングモードの ExponentialEase のグラフを示しています。
異なるイージングモードのグラフを持つQuinticEaseを
さまざまな EasingMode 値に対する 
注
PowerEase を使用すると、CubicEase プロパティを使用して、QuadraticEase、QuarticEase、QuinticEase、および Power と同じ動作を作成できます。 たとえば、PowerEaseの代わりに CubicEase を使用する場合は、Power 値 3 を指定します。
ランタイムに含まれるイージング関数を使用するだけでなく、EasingFunctionBaseから継承することで独自のカスタム イージング関数を作成できます。 次の例では、単純なカスタム イージング関数を作成する方法を示します。 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>
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
.NET Desktop feedback