イージング関数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: 式を使って加速および減速するアニメーションを作成します。 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後半。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と同じ動作を作成するCubicEaseQuadraticEaseQuarticEase、およびQuinticEaseを使用して、Powerプロパティ。You 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>