Easing 函式

發行項
08/12/2011

Easing 函式可讓您將自訂的數學公式套用至動畫。例如，您可以讓物件寫實地彈跳，或是表現得就像放在彈簧上面。您可以使用主要畫面格甚至 From/To/By 動畫來模擬這些效果，但是需要進行相當多工作，而且動畫的精確度可能比數學公式低。

除了透過繼承自 EasingFunctionBase 的方式建立專屬自訂 easing 函式之外，您還可以使用執行階段提供的數種 easing 函式的其中一種建立常見的效果。

BackEase：稍微倒退動畫的動作，再開始沿指示的路徑顯示動畫。
BounceEase：建立彈跳效果。
CircleEase：使用循環函式建立加速和 (或) 減速的動畫。
CubicEase：使用公式 f(t) = t3 建立加速和 (或) 減速的動畫。
ElasticEase：建立類似來回擺動直到停止的彈簧動畫。
ExponentialEase：使用指數公式建立加速和 (或) 減速的動畫。
PowerEase：使用公式 f(t) = tp (其中 p 等於 Power 屬性) 建立加速和 (或) 減速的動畫。
QuadraticEase：使用公式 f(t) = t2 建立加速和 (或) 減速的動畫。
QuarticEase：使用公式 f(t) = t4 建立加速和 (或) 減速的動畫。
QuinticEase：使用公式 f(t) = t5 建立加速和 (或) 減速的動畫。
SineEase：使用正弦公式建立加速和 (或) 減速的動畫。

您可以使用下列範例來探索這些 easing 函式的行為。

若要將 easing 函式套用至動畫，請使用動畫的 EasingFunction 屬性指定將 easing 函式套用至動畫。下列範例會將 BounceEase easing 函式套用至 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>

在先前的範例中，easing 函式已套用至 From/To/By 動畫。您也可以將這些 easing 函式套用至主要畫面格動畫。在下列範例中，會示範如何使用主要畫面格搭配與其關聯的 easing 函式，建立向上收縮、減速，然後向下展開 (像是下落)，再彈跳直到停止的矩形。

執行這個範例

<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 屬性修改 easing 函式的行為，也就是改變動畫插補的方式。您可以為 EasingMode 指定三種可能的值：

EaseIn：插補接在與 easing 函式關聯的數學公式之後。
EaseOut：插補接在 100% 插補減去與 easing 函式關聯的公式輸出結果之後。
EaseInOut：插補會針對動畫前半段使用 EaseIn，並且針對後半段使用 EaseOut。

下圖顯示 EasingMode 的不同值，其中 f(x) 代表動畫進度，t 代表時間。

BackEase

BackEase EasingMode 圖形。

BounceEase

BounceEase EasingMode 圖形。

CircleEase

CircleEase EasingMode 圖形。

CubicEase

CubicEase EasingMode 圖形。

ElasticEase

包含不同加/減速模式圖形的 ElasticEase。

ExponentialEase

不同加/減速模式的 ExponentialEase 圖形。

PowerEase

包含不同加/減速模式圖形的 QuarticEase。

QuadraticEase

包含不同加/減速模式圖形的 QuadraticEase

QuarticEase

包含不同加/減速模式圖形的 QuarticEase。

QuinticEase

包含不同加/減速模式圖形的 QuinticEase。

SineEase

使用不同 EasingMode 值的 SineEase

注意事項
利用 Power 屬性，即可使用 PowerEase 建立與 CubicEase、QuadraticEase、QuarticEase 和 QuinticEase 相同的行為。例如，如果您要使用 PowerEase 來取代 CubicEase，請將 Power 值指定為 3。

除了使用執行階段中包含的 easing 函式之外，您也可以透過繼承自 EasingFunctionBase 的方式，建立專屬的自訂 easing 函式。在下列範例中，會示範如何建立簡單的自訂 easing 函式。您可以覆寫 EaseInCore 方法，加入自己的數學邏輯以決定 easing 函式的行為。

執行這個範例

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

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();
        }

    }
}

<Window x:Class="CustomEasingFunction.Window1"
        xmlns:CustomEase="clr-namespace:CustomEasingFunction"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://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>

共用方式為

Easing 函式

其他資源