Easing 函式

發行項
10/18/2023

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

除了繼承自 EasingFunctionBase 來建立自己的自訂 Easing 函式之外，您還可以使用執行時間所提供的數個 Easing 函式之一來建立常見效果。

BackEase：在動畫開始在指示的路徑中以動畫顯示之前，稍微回溯動畫的動作。
BounceEase：建立彈跳效果。
CircleEase：建立使用迴圈函式加速和/或減速的動畫。
CubicEase：使用公式 f （ t ） = t 3 建立加速和/或減速的動畫。
ElasticEase：建立類似春天來回振盪的動畫，直到休息為止。
ExponentialEase：建立使用指數公式加速和/或減速的動畫。
PowerEase：使用公式 f（t） = t p 來建立動畫，以加速和/或減速，其中 p 等於 Power 屬性。
QuadraticEase：使用公式 f （ t ） = t 2 建立加速和/或減速的動畫。
QuarticEase：使用公式 f （ t ） = t 4 建立加速和/或減速的動畫。
QuinticEase：使用公式 f （ t ） = t 5 建立加速和/或減速的動畫。
SineEase：建立使用正弦公式加速和/或減速的動畫。

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

BounceEase

BounceEase EasingMode graphs.

CircleEase

CircleEase EasingMode graphs.

CubicEase

CubicEase EasingMode graphs.

ElasticEase

ElasticEase with graphs of different easingmodes.

ExponentialEase

ExponentialEase graphs of different easingmodes.

PowerEase

QuarticEase with graphs of different easingmodes.

QuadraticEase

QuadraticEase with graphs of different easingmodes

QuarticEase

QuarticEase with graphs of different easingmodes.

QuinticEase

QuinticEase with graphs of different easingmodes.

SineEase

SineEase for different EasingMode values

注意

您可以使用 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 函式

意見反應

其他資源