常見動畫的緩動函式

2021-09-22 01:24:31 字數 3608 閱讀 1067

大多時候,我們的動畫都是線性變化的。例如,乙個點從0運動到1,假如中間有8個點,那就應該是0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8。但有的時候,我們需要一種非線性的變化。例如我們做一架飛機起飛,它的變化應該是從慢到快的。又比如乙個小球落地,它的軌跡應該是拋物線,而且還會彈起。

要做到這些,就需要用到緩動函式(easingfunction)。很多語言都提供了緩動函式庫,但如我們想(或者說需要)自己實現時,就需要知道這些緩動函式的函式形式。

我們讓時間為t,值為y,那麼緩動函式就是y=f(t)。我們假設t的取值範圍是[0,1],同樣y的值域也是[0,1],這個規定對我們後面的計算有極大的幫助。怎麼把時間變成[0,1]裡的數,又怎麼把[0,1]範圍的值轉為實際的值,相信並不難。舉個例子,我們的時間是[0,1000ms],那麼把時間除以1000,就是[0,1]的陣列了。我們的值是[15,100],那麼我們把結果x作以下運算即可轉化:15+(100-15)*x。

我們知道,很多緩動函式都有easein,easeout,easeinout的選項。其實easein就是easeout旋轉180度得到的,而easeinout是把值分為[0,0.5],(0,5,1]兩段,前面用easein,後面用easeout得到的。假如我們已經得到easein的函式形式是y=f(t),那麼easeout的函式形式就是y=1-f(1-t)。所以我們只需要求出每種緩動函式的easein即可。

不使用緩動函式預設就是線性變化。它的函式形式很明顯:

y=t沒錯,這就是線性動畫的緩動函式。

表現出來就是一輛車開得太快,過了終點又往回倒一點點。

函式形式是:

表現出來是慢慢加速。

函式形式是:

同樣是加速,這個表現出來就是加油加得很猛那種。

函式形式:

y=sqrt(1-t^2)

其實加減數函式還有很多,可以用冪不同的指數函式去做,例如是t^2、t^3、t^4,指數越大,變化越迅速。

這個一般做彈簧的那種運動。

函式形式:

這個表現出來就是有彈力的小球落地的那種運動了。

這種執行沒辦法有乙個統一的函式去做,我們只能把它切成若干段,每一段都是拋物線:

[0,0.1]  y=-(t-0.05)^2+0.0025

(0.1,0.3]  y=-(t-0.2)^2+0.01

(0.3,0.7]  y=-(t-0.5)^2+0.04

(0.7,1]  y=-(t-1)^2+0.09

c#**:

case easingmethod.bounceeasein:

t = x[i];

midvalues[i] = (

(t <= 0.1 ? (-math.pow(t - 0.05, 2) + 0.0025) : 0) +

((t > 0.1 && t <= 0.3) ? (-math.pow(t - 0.2, 2) + 0.01) : 0) +

((t > 0.3 && t <= 0.7) ? (-math.pow(t - 0.5, 2) + 0.04) : 0) +

(t > 0.7 ? (-math.pow(t - 1, 2) + 0.09) : 0)

) / 0.09;

break;

case easingmethod.bounceeaseout:

t = 1 - x[i];

midvalues[i] = 1 - (

(t <= 0.1 ? (-math.pow(t - 0.05, 2) + 0.0025) : 0) +

((t > 0.1 && t <= 0.3) ? (-math.pow(t - 0.2, 2) + 0.01) : 0) +

((t > 0.3 && t <= 0.7) ? (-math.pow(t - 0.5, 2) + 0.04) : 0) +

(t > 0.7 ? (-math.pow(t - 1, 2) + 0.09) : 0)

) / 0.09;

break;

緩動函式與動畫

搬運 緩動函式,主要用在控制動畫上,它是乙個區間函式 用它來做動畫,實際上就是將這個函式離散化 比如在x軸上取100個點,計算得到f x 值 就是得到了這個動畫在這100步的變化過程 緩動函式需要四個引數 b 函式開始值 c 函式結束值 d 結束時間 實際上這裡並不是真正意義上的時間,而是離散時的取...

用緩動函式模擬物理動畫

1 緩動函式簡介 1 緩動函式的動畫效果是建立在calayer層級的關鍵幀動畫基礎之上 也就是說用普通的uiview的animation是無法直接實現緩動函式 2 緩動函式是一系列模擬物理效果 如拋物線 方程式的統稱,用以計算給定兩點之間的插值 3 兩點之間插的值越多,效果越好,但是會耗費更多的效能...

用緩動函式模擬物理動畫

用緩動函式模擬物理動畫 1 緩動函式簡介 1 緩動函式的動畫效果是建立在calayer層級的關鍵幀動畫基礎之上 也就是說用普通的uiview的animation是無法直接實現緩動函式 2 緩動函式是一系列模擬物理效果 如拋物線 方程式的統稱,用以計算給定兩點之間的插值 3 兩點之間插的值越多,效果越...