你應該知道的緩動知識點

山鬼發表於2019-05-14

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

你應該知道的緩動知識點

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

你應該知道的緩動知識點

基本緩動

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

緩動的作用可以將一個物體移動到另外的地方，放置到空間中，可以對比出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(時間)的，你當我是奇異博士嗎?

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

你應該知道的緩動知識點

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

這裡歡迎大家提出在開發中遇到的動畫與互動問題，我會即時回答的，包括實現與演算法方面，我會第一時間來回復~
也歡迎大家投幣餵養與介紹富婆


相關文章