缓动的原理与实现

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

程序实现缓动

没有加速度的线性运动

数学公式为: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(percentComplete2Math.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; 
    }; 
}; 
```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容