緩動公式整理（附：C#實現及WPF原版對比）

leslie_xin發表於2020-09-22

公式C#

前言

緩動在動畫效果中應用非常廣泛，在合適的時候使用一些緩動效果會使得效果更加符合人的直觀感受，簡單來說，會顯得更加自然。

WPF提供了11種緩動效果，涵蓋了大部分的使用場景。不過如果需要在非WPF下使用這些緩動效果，就需要知道對應的曲線公式了。因為公式是通用的，所以可以很輕鬆的使用其他語言實現。

由於本人數學水平有限，所以本文注重的應用而不是原理。在本文中，將會使用C#去實現，並附上與WPF原版的對比效果。

本文參考：

1，https://docs.microsoft.com/zh-cn/dotnet/desktop/wpf/graphics-multimedia/easing-functions?view=netframeworkdesktop-4.8

2，https://github.com/ai/easings.net

文末會附上示例原始碼，需要者可自行下載。

本文地址：https://www.cnblogs.com/lesliexin/p/13594811.html

一、WPF中的緩動效果

在WPF中，共有11種：Back，Bounce，Circle，Quadratic，Cubic，Quartic，Quintic，Elastic，Exponential，Sine，Power。不過嚴格來說只有7種，因為Quadratic，Cubic，Quartic，Quintic是由Power去實現的，由於Power引數未定，所以僅實現前10種效果。

所以對於每個緩動效果而言，都有三種模式：緩入（EaseIn）、緩出（EaseOut）、緩入緩出（EaseInOut）。

二、公式與動畫

一個元素的動畫效果，其實就是這個元素變化的快慢，也就是速度。速度與時間間隔和該時間間隔內運動距離兩個變數有關。在實際實現中，時間間隔是相等的，那麼速度的變化與距離的變化就成正比。在一個二維座標當中，橫座標為時間，縱座標為距離，那麼其形成的曲線中，曲線越陡，速度越快，曲線越平緩，則速度越慢。

而我們使用公式的目的，就是取得這個縱座標的值。

不過，要注意的是，我們獲取的曲線的時間範圍是：0~1，這不是具體的1秒或1毫秒，而是“單位1”。舉例來說，如果一個動畫效果時長是2000ms，那麼在第x ms時，對應的單位時間就是x/2000。

三、緩動公式、緩動效果、與WPF對比

1，Back

1.1，曲線公式

public static double Back(double x, LEaseMode easeMode)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return 2.70158 * x * x * x - 1.70158 * x * x;
        case LEaseMode.EaseOut:
            return 1 + 2.70158 * Math.Pow(x - 1, 3) + 1.70158 * Math.Pow(x - 1, 2);
        case LEaseMode.EaseInOut:
            return x < 0.5 ? (Math.Pow(2 * x, 2) * (7.189819 * x - 2.5949095)) / 2 : (Math.Pow(2 * x - 2, 2) * (7.189819 * x - 4.5949095) + 2) / 2;
        default:
            return 0;
    }
}

Back

1.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

1.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

2，Bounce

2.1，曲線公式

private static double BounceOut(double x)
{
    if (x < 1d / 2.75d) return 7.5625 * x * x;
    else if (x < 2d / 2.75d) return 7.5625 * (x -= 1.5d / 2.75d) * x + 0.75;
    else if(x<2.5d/2.75d) return 7.5625 * (x -= 2.25d / 2.75d) * x + 0.9375;
    else return 7.5625 * (x -= 2.625d / 2.75d) * x + 0.984375;
}

public static double Bounce(double x, LEaseMode easeMode)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return 1 - BounceOut(1 - x);
        case LEaseMode.EaseOut:
            return BounceOut(x);
        case LEaseMode.EaseInOut:
            return x < 0.5 ? (1 - BounceOut(1 - 2 * x)) / 2 : (1 + BounceOut(2 * x - 1)) / 2;
        default:
            return 0;
    }
}

Bounce

2.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

2.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

3，Circle

3.1，曲線公式

public static double Circle(double x, LEaseMode easeMode)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return 1 - Math.Sqrt(1 - Math.Pow(x, 2));
        case LEaseMode.EaseOut:
            return Math.Sqrt(1 - Math.Pow(x - 1, 2));
        case LEaseMode.EaseInOut:
            return x < 0.5 ? (1 - Math.Sqrt(1 - Math.Pow(2 * x, 2))) / 2 : (Math.Sqrt(1 - Math.Pow(-2 * x + 2, 2)) + 1) / 2;
        default:
            return 0;
    }
}

Circle

3.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

3.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

4，Quadratic

4.1，曲線公式

public static double Power(double x,LEaseMode easeMode,int power)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return Math.Pow(x, power);
        case LEaseMode.EaseOut:
            return 1-Math.Pow(1-x,power);
        case LEaseMode.EaseInOut:
            return x < 0.5 ? Math.Pow(2,power-1)*Math.Pow(x,power) : 1 - Math.Pow(-2 * x + 2, power) / 2;
        default:
            return 0;
    }
}

public static double Quadratic(double x, LEaseMode easeMode)
{
    return Power(x, easeMode, 2);
}

Quadratic

4.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

4.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

5，Cubic

5.1，曲線公式

public static double Power(double x,LEaseMode easeMode,int power)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return Math.Pow(x, power);
        case LEaseMode.EaseOut:
            return 1-Math.Pow(1-x,power);
        case LEaseMode.EaseInOut:
            return x < 0.5 ? Math.Pow(2,power-1)*Math.Pow(x,power) : 1 - Math.Pow(-2 * x + 2, power) / 2;
        default:
            return 0;
    }
}

public static double Cubic(double x, LEaseMode easeMode)
{
    return Power(x, easeMode, 3);
}

Cubic

5.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

5.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

6，Quartic

6.1，曲線公式

public static double Power(double x,LEaseMode easeMode,int power)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return Math.Pow(x, power);
        case LEaseMode.EaseOut:
            return 1-Math.Pow(1-x,power);
        case LEaseMode.EaseInOut:
            return x < 0.5 ? Math.Pow(2,power-1)*Math.Pow(x,power) : 1 - Math.Pow(-2 * x + 2, power) / 2;
        default:
            return 0;
    }
}

public static double Quartic(double x, LEaseMode easeMode)
{
    return Power(x, easeMode,4);
}

Quartic

6.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

6.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

7，Quintic

7.1，曲線公式

public static double Power(double x,LEaseMode easeMode,int power)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return Math.Pow(x, power);
        case LEaseMode.EaseOut:
            return 1-Math.Pow(1-x,power);
        case LEaseMode.EaseInOut:
            return x < 0.5 ? Math.Pow(2,power-1)*Math.Pow(x,power) : 1 - Math.Pow(-2 * x + 2, power) / 2;
        default:
            return 0;
    }
}

public static double Quintic(double x, LEaseMode easeMode)
{
    return Power(x, easeMode, 5);
}

Quintic

7.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

7.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

8，Elastic

8.1，曲線公式

public static double Elastic(double x, LEaseMode easeMode)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return x == 0 ? 0 : x == 1 ? 1 : -Math.Pow(2, 10 * x - 10) * Math.Sin((x * 10 - 10.75) * 2 * Math.PI / 3);
        case LEaseMode.EaseOut:
            return x == 0 ? 0 : x == 1 ? 1 : Math.Pow(2, -10 * x) * Math.Sin((x * 10 - 0.75) * 2 * Math.PI / 3)+1;
        case LEaseMode.EaseInOut:
            return x == 0 ? 0 : x == 1 ? 1 : x < 0.5 ? -(Math.Pow(2, 20 * x - 10) * Math.Sin((x * 20 - 11.125) * 2 * Math.PI / 4.5)) / 2 : (Math.Pow(2, -20 * x + 10) * Math.Sin((x * 20 - 11.125) * 2 * Math.PI / 4.5)) / 2 + 1;
        default:
            return 0;
    }
}

Elastic

8.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

8.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

9，Exponential

9.1，曲線公式

public static double Exponential(double x, LEaseMode easeMode)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return x == 0 ? 0 : Math.Pow(2, 10 * x - 10); 
        case LEaseMode.EaseOut:
            return x == 1 ? 1 : 1 - Math.Pow(2, -10 * x);
        case LEaseMode.EaseInOut:
            return x == 0 ? 0 : x == 1 ? 1 : x < 0.5 ? Math.Pow(2, 20 * x - 10) / 2 : (2 - Math.Pow(2, -20 * x + 10)) / 2;
        default:
            return 0;
    }
}

Exponential

9.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

9.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

10，Sine

10.1，曲線公式

public static double Sine(double x, LEaseMode easeMode)
{
    switch (easeMode)
    {
        case LEaseMode.EaseIn:
            return 1 - Math.Cos((x * Math.PI) / 2);
        case LEaseMode.EaseOut:
            return Math.Sin((x * Math.PI) / 2);
        case LEaseMode.EaseInOut:
            return -(Math.Cos(Math.PI * x) - 1) / 2;
        default:
            return 0;
    }
}

Sine

10.2，WinForm效果

a，EaseIn：

b，EaseOut：

c，EaseInOut：

10.3，WPF效果

（上面矩形為WPF原版緩動效果，下面矩形為公式實現效果）

a，EaseIn：

b，EaseOut：

c，EaseInOut：

四、結束語

通過上面的動圖我們會發現，其中一些效果，使用公式生成的與WPF原版的是不一樣的，一是因為WPF原版的曲線不是固定的，還有其他引數去調控，而我對比的時候使用的是WPF預設的緩動效果；二是因為一像Bounce、Elastic等曲線以我的能力很難扒出來具體的公式，所以更多的是依照文首的Github上那個專案中的公式。所以難免有所差異。

同時，寫本篇文章是因為在之後的自定義控制元件系列文章，以及其他涉及圖形的文章中，會頻繁的使用緩動效果以增強直觀感受，到時文章中會引用本文所生成的類庫，當然也會隨文附上緩動公式。

五、原始碼下載

原始碼包含：

1，緩動類庫

2，WinForm演示

3，WPF演示

https://files.cnblogs.com/files/lesliexin/LEase.7z

WPF兩種緩動動畫
2020-10-07
動畫
c#（WPF）實現連連看
2018-04-07
C#
WPF/C#：實現導航功能
2024-07-18
C#
WPF/C#：如何實現拖拉元素
2024-06-27
C#
WPF/C#：在WPF中如何實現依賴注入
2024-07-11
C#依賴注入
【C#】反射的用法及效率對比
2021-02-18
C#反射
C# 單例模式的實現和效能對比
2018-10-08
C#單例模式
C#開發WPF/Silverlight動畫及遊戲系列
2021-09-09
C#動畫遊戲
Duilib的雙緩衝實現，附帶GDI、WTL的雙緩衝實現
2021-06-29
UI
DOTween實現緩動變值動效
2022-01-04
Java 動態代理原理圖解 (附：2種實現方式詳細對比)
2022-10-31
Java圖解
[C#] [WPF] 在MVVM中實現拖拽功能 - 入門
2024-05-15
C#MVVM
WPF手動實現切換頁面
2024-08-28
單例模式實現對比
2018-05-22
單例模式
C#例項化物件的三種方式及效能對比
2020-12-10
C#物件
幀動畫的多種實現方式與效能對比
2019-03-05
動畫
WPF/C#：BusinessLayerValidation
2024-06-25
C#
C# WPF 用MediaElement控制元件實現視訊迴圈播放
2018-04-23
C#控制元件
WPF使用Shape實現複雜線條動畫
2024-05-15
動畫
etl 增量對比解決方案 etl-engine 如何實現增量對比
2023-03-15
excel自動求百分比公式 excel怎麼輸入百分比公式
2022-04-18
Excel公式
LRU快取替換策略及C#實現
2023-04-05
快取C#
WPF 實現陰影效果
2018-09-21
WPF多表頭表格實現
2024-04-19
WPF實現統計圖
2021-11-02
C# WPF 生命週期
2024-11-21
C#
vue-codemirror 實現文字差異比對
2024-07-04
Vue
Python實現簡單的excel對比工具
2021-04-22
PythonExcel
一文讀懂支援向量機SVM（附實現程式碼、公式）
2018-06-02
公式
WPF/C#實現影像濾鏡最佳化方案：打造炫目視覺體驗！
2024-04-16
C#視覺
FSM狀態機及C#反射實現邏輯
2024-03-16
C#反射
教你如何用WPF實現文字粒子閃爍動畫效果
2020-09-10
動畫
Go vs Java vs C# 語法對比
2022-02-13
GoJavaC#
Simple WPF: WPF 實現按鈕的長按，短按功能
2024-07-08
WPF實現手勢解鎖
2020-09-07
純Python和PyTorch對比實現迴圈神經網路RNNCell及反向傳播
2018-12-15
PythonPyTorch神經網路RNN反向傳播
對HashMap的思考及手寫實現
2019-01-28
HashMap
數值積分公式及龍貝格（Romberg）演算法實現matlab
2020-10-13
公式演算法Matlab

緩動公式整理（附：C#實現及WPF原版對比）

前言

一、WPF中的緩動效果

二、公式與動畫

三、緩動公式、緩動效果、與WPF對比

1，Back

1.1，曲線公式

1.2，WinForm效果

1.3，WPF效果

2，Bounce

2.1，曲線公式

2.2，WinForm效果

2.3，WPF效果

3，Circle

3.1，曲線公式

3.2，WinForm效果

3.3，WPF效果

4，Quadratic

4.1，曲線公式

4.2，WinForm效果

4.3，WPF效果

5，Cubic

5.1，曲線公式

5.2，WinForm效果

5.3，WPF效果

6，Quartic

6.1，曲線公式

6.2，WinForm效果

6.3，WPF效果

7，Quintic

7.1，曲線公式

7.2，WinForm效果

7.3，WPF效果

8，Elastic

8.1，曲線公式

8.2，WinForm效果

8.3，WPF效果

9，Exponential

9.1，曲線公式

9.2，WinForm效果

9.3，WPF效果

10，Sine

10.1，曲線公式

10.2，WinForm效果

10.3，WPF效果

四、結束語

五、原始碼下載

相關文章