缓动的原理与实现

缓动的原理与实现

动画就是以一定的频率去改变元素的属性，使之运动起来，最普通的动画就是匀速的动画，每次增加固定的值。缓动就是用来修改每次增加的值，让其按照不规律的方式增加，实现动画的变化。

程序实现缓动

没有加速度的线性运动

数学公式为：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(xNpasses π) * (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

原文: https://leohxj.gitbooks.io/front-end-database/content/animation/easing.html

缓动原理与实现