缓动的原理与实现

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

程序实现缓动

没有加速度的线性运动

数学公式为：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

缓动原理与实现