緩動的原理與實現

動畫就是以一定的頻率去改變元素的屬性，使之運動起來，最普通的動畫就是勻速的動畫，每次增加固定的值。緩動就是用來修改每次增加的值，讓其按照不規律的方式增加，實現動畫的變化。

程序實現緩動

沒有加速度的線性運動

數學公式為：f(x)=x, 代碼如下：

AnimationTimer.makeLinear = function () {
   return function (percentComplete) {
      return percentComplete;
   };
};

 

逐漸加速的緩入運動

數學公式為：f(x)=x^2, 代碼如下：

AnimationTimer.makeEaseIn = function (strength) {
   return function (percentComplete) {
      return Math.pow(percentComplete, strength*2);
   };
};

 

逐漸減速的緩出運動

數學公式為：f(x)=1-(1-x)^2, 代碼如下：

AnimationTimer.makeEaseOut = function (strength) {
   return function (percentComplete) {
      return 1 - Math.pow(1 - percentComplete, strength*2);
   };
};

 

緩入緩出運動

數學公式為：f(x)=x-sin(x*2π)/(2π), 代碼如下：

AnimationTimer.makeEaseInOut = function () {
   return function (percentComplete) {
      return percentComplete - Math.sin(percentComplete*2*Math.PI) / (2*Math.PI);
   };
};

 

彈簧運動

數學公式為：f(x)=(1-cos(x*Npasses * π) * (1-π))+x, Npassed表示運動物體穿越中軸的次數。 代碼如下：

AnimationTimer.makeElastic = function (passes) {
   passes = passes || 3;
   return function (percentComplete) {
       return ((1-Math.cos(percentComplete * Math.PI * passes)) *
               (1 - percentComplete)) + percentComplete;
   };
};

 

彈跳運動

Nbounces表示運動物體被彈起的總次數，彈起的次數為偶數的時候，數學公式為：

f(x)=(1=cos(x Nbounces π) * (1-π))+x

彈起的次數為奇數的時候，數學公式為：

f(x)=2-(((1-cos(x π Nbounces)) * (1-x)+x)

代碼如下：

AnimationTimer.makeBounce = function (bounces) {

    var fn = AnimationTimer.makeElastic(bounces);

        return function (percentComplete) {

            percentComplete = fn(percentComplete);

            return percentComplete <= 1 ? percentComplete : 2-percentComplete;

        };

}; 

 

 

參考資料

• jQuery Easing Plugin