Easing 函式

發行項
10/14/2024

Easing 函式可讓您將自訂的數學公式套用至動畫。例如，您可能想要物件實際表現出反彈或像是在彈簧上一樣。您可以使用主要畫面格或甚至 From/To/By 動畫來模擬這些效果，但所需的工作量可能很大，而且和使用數學公式相比，動畫會較不精確。

除了藉由繼承自 EasingFunctionBase 來建立您自訂的 easing 函式，您還可以使用執行階段所提供的數個 easing 函式之一來製作常見效果。

BackEase：在動畫開始在指示的路徑中以動畫顯示之前，稍微撤回動畫的動作。
BounceEase：製作彈跳效果。
CircleEase：使用循環函式來建立加速和/或減速的動畫。
CubicEase：製作使用公式 f(t) = t³ 來加速和/或減速的動畫。
ElasticEase：製作類似噴泉來回振盪直到停止的動畫。
ExponentialEase：製作使用指數公式加速和/或減速的動畫。
PowerEase：製作使用公式 f(t) = t^p 公式來加速和/或減速的動畫，其中 p 等於 Power 屬性。
QuadraticEase：製作使用公式 f(t) = t² 來加速和/或減速的動畫。
QuarticEase：製作使用公式 f(t) = t⁴ 來加速和/或減速的動畫。
QuinticEase：製作使用公式 f(t) = t⁵ 來加速和/或減速的動畫。
SineEase：製作使用 sine 公式來加速和/或減速的動畫。

若要將 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

不同 easingmode 的 ExponentialEase 圖表。

PowerEase

具有不同 easingmode 之圖表的 QuarticEase。

QuadraticEase

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

QuarticEase

具有不同 easingmode 之圖表的 QuarticEase。

QuinticEase

具有不同 easingmode 之圖表的 QuinticEase。

SineEase

不同 EasingMode 值的 SineEase

注意

您可以使用 PowerEase 屬性來用 CubicEase 製作與 QuadraticEase、QuarticEase、QuinticEase 和 Power 相同的行為。例如，如果您想要使用 PowerEase 來取代 CubicEase，請指定 Power 值為 3。

除了使用執行階段中內含的 easing 函式，您還可以藉由繼承自 EasingFunctionBase 來建立您自訂的 easing 函式。下列範例將示範如何建立簡單的自訂 easing 函式。您可以藉由覆寫 EaseInCore 方法，來新增自己的數學邏輯，以了解 easing 函式的運作方式。

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>

共用方式為

Easing 函式

其他資源