イージング関数Easing Functions

イージング関数を使うと、独自の数式をアニメーションに適用することができます。Easing functions allow you to apply custom mathematical formulas to your animations. たとえば、オブジェクトをリアルにバウンドさせたり、バネに乗っているように動作させたりすることができます。For example, you may want an object to realistically bounce or behave as though it were on a spring. キー フレーム アニメーションや From/To/By アニメーションを使ってこれらの効果を近似することもできますが、大量の作業が必要であり、アニメーションは数式を使うほど正確ではありません。You could use Key-Frame or even From/To/By animations to approximate these effects but it would take a significant amount of work and the animation would be less accurate than using a mathematical formula.

からEasingFunctionBase継承することによって独自のカスタムイージング関数を作成するだけでなく、ランタイムによって提供されるいくつかのイージング関数の1つを使用して、一般的な効果を作成できます。Besides creating your own custom easing function by inheriting from EasingFunctionBase, you can use one of several easing functions provided by the runtime to create common effects.

  • BackEase :指定されたパスでアニメーション化を開始する前に、アニメーションのモーションを少し取り消します。BackEase: Retracts the motion of an animation slightly before it begins to animate in the path indicated.

  • BounceEase:バウンス効果を作成します。BounceEase: Creates a bouncing effect.

  • CircleEase :循環関数を使用して加速または減速するアニメーションを作成します。CircleEase: Creates an animation that accelerates and/or decelerates using a circular function.

  • CubicEase :数式f(t) = t3を使用して加速または減速するアニメーションを作成します。CubicEase: Creates an animation that accelerates and/or decelerates using the formula f(t) = t3.

  • ElasticEase:残りの部分に戻るまで、スプリングの不安定さに似たアニメーションを作成します。ElasticEase: Creates an animation that resembles a spring oscillating back and forth until it comes to rest.

  • ExponentialEase :指数式を使用して加速または減速するアニメーションを作成します。ExponentialEase: Creates an animation that accelerates and/or decelerates using an exponential formula.

  • PowerEase :式f(t) = tp (p がPowerプロパティと等しい) を使用して加速または減速するアニメーションを作成します。PowerEase: Creates an animation that accelerates and/or decelerates using the formula f(t) = tp where p is equal to the Power property.

  • QuadraticEase:数式f(t) = t2を使用して加速または減速するアニメーションを作成します。QuadraticEase: Creates an animation that accelerates and/or decelerates using the formula f(t) = t2.

  • QuarticEase:数式f(t) = t4を使用して加速または減速するアニメーションを作成します。QuarticEase: Creates an animation that accelerates and/or decelerates using the formula f(t) = t4.

  • QuinticEase:数式f(t) = t5を使用して加速または減速するアニメーションを作成します。QuinticEase: Create an animation that accelerates and/or decelerates using the formula f(t) = t5.

  • SineEase:サイン式を使用して加速または減速するアニメーションを作成します。SineEase: Creates an animation that accelerates and/or decelerates using a sine formula.

イージング関数をアニメーションに適用するには、アニメーションEasingFunctionのプロパティを使用して、アニメーションに適用するイージング関数を指定します。To apply an easing function to an animation, use the EasingFunction property of the animation specify the easing function to apply to the animation. 次の例ではBounceEase 、にイージング関数DoubleAnimationを適用して、バウンス効果を作成します。The following example applies a BounceEase easing function to a DoubleAnimation to create a bouncing effect.

<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 アニメーションに適用しました。In the previous example, the easing function was applied to a From/To/By animation. キー フレーム アニメーションにこれらのイージング関数を適用することもできます。You can also apply these easing functions to Key-Frame animations. 次の例では、キー フレームとそれらに関連付けられたイージング関数を使って、四角形が上方に縮まり、遅くなり、下方に延び (落下するように)、停止するアニメーションを作成します。The following example shows how to use key frames with easing functions associated with them to create an animation of a rectangle that contracts upward, slows down, then expands downward (as though falling) and then bounces to a stop.

<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プロパティを使用して、イージング関数の動作方法を変更したり、アニメーションの補間方法を変更したりできます。You can use the EasingMode property to alter how the easing function behaves, that is, change how the animation interpolates. 次の3つの値をEasingMode指定できます。There are three possible values you can give for EasingMode:

  • EaseIn:補間は、イージング関数に関連付けられている数式に従います。EaseIn: Interpolation follows the mathematical formula associated with the easing function.

  • EaseOut:補間は、イージング関数に関連付けられた数式の出力を差し引いた 100% 補間に従います。EaseOut: Interpolation follows 100% interpolation minus the output of the formula associated with the easing function.

  • EaseInOut:補間EaseInは、アニメーションの最初の半分とEaseOut 2 番目の半分に使用されます。EaseInOut: Interpolation uses EaseIn for the first half of the animation and EaseOut for the second half.

EasingModeのグラフでは、 f(x) がアニメーションの進行状況を表し、 tが時間を表すという異なる値を示しています。The graphs below demonstrate the different values of EasingMode where f(x) represents the animation progress and t represents time.

BackEase

BackEase EasingMode のグラフ。BackEase EasingMode graphs.

BounceEase

BounceEase EasingMode のグラフ。BounceEase EasingMode graphs.

CircleEase

CircleEase EasingMode のグラフ。CircleEase EasingMode graphs.

CubicEase

CubicEase EasingMode のグラフ。CubicEase EasingMode graphs.

ElasticEase

異なる EasingMode の ElasticEase のグラフ。ElasticEase with graphs of different easingmodes.

ExponentialEase

異なる EasingMode の ExponentialEase のグラフ。ExponentialEase graphs of different easingmodes.

PowerEase

異なる EasingMode の QuarticEase のグラフ。QuarticEase with graphs of different easingmodes.

QuadraticEase

異なる EasingMode の QuadraticEase のグラフ。QuadraticEase with graphs of different easingmodes

QuarticEase

異なる EasingMode の QuarticEase のグラフ。QuarticEase with graphs of different easingmodes.

QuinticEase

異なる EasingMode の QuinticEase のグラフ。QuinticEase with graphs of different easingmodes.

SineEase

異なる EasingMode 値の SineEaseSineEase for different EasingMode values

注意

を使用PowerEaseするとQuadraticEase QuinticEase 、プロパティをPower使用して、、、およびと同じ動作を作成できます。 QuarticEase CubicEaseYou can use PowerEase to create the same behavior as CubicEase, QuadraticEase, QuarticEase, and QuinticEase by using the Power property. たとえば、を使用してのPowerEase CubicEase代わりにを使用する場合はPower 、値を3に指定します。For example, if you want to use PowerEase to substitute for CubicEase, specify a Power value of 3.

ランタイムに含まれるイージング関数を使用するだけでなく、から継承することで、独自のEasingFunctionBaseカスタムイージング関数を作成することもできます。In addition to using the easing functions included in the run-time, you can create your own custom easing functions by inheriting from EasingFunctionBase. 次の例では、簡単なカスタム イージング関数を作成する方法を示します。The following example demonstrates how to create a simple custom easing function. EaseInCoreメソッドをオーバーライドすることにより、イージング関数の動作について独自の数学的ロジックを追加できます。You can add your own mathematical logic for how the easing function behaves by overriding the EaseInCore method.

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>