イージング関数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によって独自のカスタム イージング関数を作成する以外に、ランタイムによって提供される複数のイージング関数のいずれかを使用して、共通の効果を作成できます。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: p がプロパティに等しい場合に式f(t) = tpを使用して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: sine 式を使用して加速または減速するアニメーションを作成します。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後半に使用されます。EaseInOut: Interpolation uses EaseIn for the first half of the animation and EaseOut for the second half.

以下のグラフは 、f( EasingMode 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

異なるイージングモードのグラフで二次的な動作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してCubicEase、 、 QuadraticEase、およびQuarticEaseQuinticEase同じ動作をPower作成できます。You can use PowerEase to create the same behavior as CubicEase, QuadraticEase, QuarticEase, and QuinticEase by using the Power property. たとえば、PowerEaseCubicEaseを使用して を置換する場合は、値Power3 を指定します。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>