你應該知道的緩動知識點

最近想寫小冊的心思愈來愈重，直到有人告訴了我....個人等級不夠，掘力值不夠，閱讀量不夠，好吧，我認可我哭了

我問了一下，好像學生證不給打折，真殘暴.

基本緩動

基本的緩動常見的有勻速運動，也能夠"緩入""緩出"，固然也包含了正弦，躍動等效果。

緩動的做用能夠將一個物體移動到另外的地方，放置到空間中，能夠對比出X1(x,y)與x2(x,y),在緩動中，包含了幾個比較重要的要素

1. 起點與目標點

2. 比例係數

總體來講，能夠總結爲這兩個，由於整個計算的過程都是在維護這兩個要素數據，看一段代碼

var easing = 0.5    //比例係數
var ori = new Vector(0,0),  //起始位置
    target = new Vector(20,20), //目標點
    ball.pos = new Vector(0,0)
​
var to = ori.subtrac(target).dot(easing)    //遞增量(20 - 0，20 - 0)*0.5 = (10，10)
ball.pos.add(to)  複製代碼

也就是意味着每次更新都會增長5個增量，兩次到達，這也就是勻速緩動的原理，稍微加工一下

var easing = 0.5    //比例係數
var ball.pos = new Vector(0,0), //起始位置
    target = new Vector(20,20), //目標點
​
var to = ball.pos.subtrac(target).dot(easing)   //遞增量(20 - x，20 - y)*0.5 = (x1，y1)
ball.pos.add(to)    複製代碼

咱們會發現每次更新的時候，ball的pos都會更新，這致使在計算增量的時候，每次都會有不同的值，這也使得ball的移動每次都不同，並且是愈來愈慢，是否是感受有點像緩出了，但是仍是感受不太同樣。看一下別人的代碼。

緩動

緩動這裏須要維護的要素就多了很多，也是目前大多數的緩動算法通用的幾個參數，至於少數的那幾個我不知道，我也沒敢問

• t:time：緩動經歷過的時間

• b:beforeMove：起始位置

• c:changeDistance：起始位置與目標位置的距離,也就是距離上的一個變化量

• d:duration：咱們要求對象從起始位置移動到目標位置所需的時間，也就是緩動的總時長

function easeIn (t,b,c,d){
   return c*t/d + b;
}複製代碼

分析一下這個代碼，用c乘以這個時間t佔緩動總時長d的比例，能夠獲得移動的距離，再加上初始位置就是下一次緩動的值,是否是清晰了不少

因爲y愈來愈大，這也致使下一次的值愈來愈大，實現了位移愈來愈大的效果，也就是緩入，緩出的效果只須要返回值愈來愈小就好

function easeOut (t, b, c, d){
        return -c*t/d + b;
    }複製代碼

緩動的效果是做用於速度的，因此在處理緩動的效果的時候，能夠利用不少的數學模型

Linear：無緩動效果，f(t) = t；

Quadratic：二次方的緩動，f(t) = t^2；

Cubic：三次方的緩動，f(t) = t^3；

Quartic：四次方的緩動，f(t) = t^4；

Quintic：五次方的緩動，f(t) = t^5；

Sinusoidal：正弦曲線的緩動，f(t) = sin(t)；

Exponential：指數曲線的緩動，f(t) = 2^t；

Circular：圓形曲線的緩動，f(t) = sqrt(1 – t^2)；

也許你會發現這些公式都是操控t(時間)的，你當我是奇異博士嗎?

有了時間跟位移，難道不是速度嗎....

好了，下一個知識點，我趕時間去掙掘力

這裏歡迎你們提出在開發中遇到的動畫與交互問題，我會即時回答的，包括實現與算法方面，我會第一時間來回復~

也歡迎你們投幣餵養與介紹富婆