基于时间的动画函数

基于时间的动画函数是适用于大多数情况,避免了由于页面切换造成的动画不连贯现象,同时jquery内部也使用的这种方法。下面是源码,结合源码看一下就明白了。

<script>
   var btn=document.getElementsByClassName("button-success")[0];
   var dv=document.getElementsByClassName("div")[0];
   btn.onclick= function () {
      getStyle(dv,"left");
      move(dv,2000,{
         left:"200",
         top:"300",
      },"elasticBoth", function () {
         console.log(1);
      })
   }
   var move= function (obj,t, JSON, type, fn) {
      var startValue={};//获取其实值
      var startTime=(new Date()).getTime();//获取起始时间
      for(var attr in JSON){
         startValue[attr]=0;//初始化一个style对象
         if(attr ==="opacity"){
            startValue[attr]=Math.round(getStyle(obj,attr)*100);//兼容IE style是opacity的情况
         }else{
            startValue[attr]=parseInt(getStyle(obj,attr))
         }
      }
      clearInterval(obj.time);//避免多次触发造成动画叠加
      obj.time=setInterval(function () {
         var nowTime=(new Date()).getTime();//获取现在时间
         var scale=1-Math.max(0,startTime+t-nowTime)/t;//通过tartTime+t-nowTime获取随着时间变化的变化率
         for(var attr in JSON){//对json形式的style进行挨个赋值
            var value=Tween[type](scale*t,startValue[attr],JSON[attr]-startValue[attr],t);//Tween用法,这里把时间t设置为变化量,这样就可以得到Tween处理后的变化值。
            if(attr==="opacity"){
               obj.style.filter='alpha(opacity'+value+')';
               obj.style.opacity=value/100;
            }else{
               obj.style[attr]=value+'px';
            }
         }
         if(scale===1){
            clearInterval(obj.time);
            if(fn){
               fn.call(obj);//触发回调
            }
         }
      },30);

   }
   var getStyle= function (obj, attr) {
      if(obj.currentStyle){
         return obj.currentStyle[attr];
      }else{
         return getComputedStyle(obj,false)[attr];
      }
   }
   var Tween = {
      linear: function (t, b, c, d){  //匀速
         return c*t/d + b;
      },
      easeIn: function(t, b, c, d){  //加速曲线
         return c*(t/=d)*t + b;
      },
      easeOut: function(t, b, c, d){  //减速曲线
         return -c *(t/=d)*(t-2) + b;
      },
      easeBoth: function(t, b, c, d){  //加速减速曲线
         if ((t/=d/2) < 1) {
            return c/2*t*t + b;
         }
         return -c/2 * ((--t)*(t-2) - 1) + b;
      },
      easeInStrong: function(t, b, c, d){  //加加速曲线
         return c*(t/=d)*t*t*t + b;
      },
      easeOutStrong: function(t, b, c, d){  //减减速曲线
         return -c * ((t=t/d-1)*t*t*t - 1) + b;
      },
      easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
         if ((t/=d/2) < 1) {
            return c/2*t*t*t*t + b;
         }
         return -c/2 * ((t-=2)*t*t*t - 2) + b;
      },
      elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线(弹动渐入)
         if (t === 0) {
            return b;
         }
         if ( (t /= d) == 1 ) {
            return b+c;
         }
         if (!p) {
            p=d*0.3;
         }
         if (!a || a < Math.abs(c)) {
            a = c;
            var s = p/4;
         } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
         }
         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
      },
      elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线(弹动渐出)
         if (t === 0) {
            return b;
         }
         if ( (t /= d) == 1 ) {
            return b+c;
         }
         if (!p) {
            p=d*0.3;
         }
         if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
         } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
         }
         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
      },
      elasticBoth: function(t, b, c, d, a, p){
         if (t === 0) {
            return b;
         }
         if ( (t /= d/2) == 2 ) {
            return b+c;
         }
         if (!p) {
            p = d*(0.3*1.5);
         }
         if ( !a || a < Math.abs(c) ) {
            a = c;
            var s = p/4;
         }
         else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
         }
         if (t < 1) {
            return - 0.5*(a*Math.pow(2,10*(t-=1)) *
                  Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
         }
         return a*Math.pow(2,-10*(t-=1)) *
               Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
      },
      backIn: function(t, b, c, d, s){     //回退加速(回退渐入)
         if (typeof s == 'undefined') {
            s = 1.70158;
         }
         return c*(t/=d)*t*((s+1)*t - s) + b;
      },
      backOut: function(t, b, c, d, s){
         if (typeof s == 'undefined') {
            s = 3.70158;  //回缩的距离
         }
         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
      },
      backBoth: function(t, b, c, d, s){
         if (typeof s == 'undefined') {
            s = 1.70158;
         }
         if ((t /= d/2 ) < 1) {
            return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
         }
         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
      },
      bounceIn: function(t, b, c, d){    //弹球减振(弹球渐出)
         return c - Tween['bounceOut'](d-t, 0, c, d) + b;
      },
      bounceOut: function(t, b, c, d){
         if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
         } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
         } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
         }
         return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
      },
      bounceBoth: function(t, b, c, d){
         if (t < d/2) {
            return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
         }
         return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
      }
   }
</script>

Linear:无缓动效果(匀速运动);
Quadratic:二次方的缓动;
Cubic:三次方的缓动
Quartic:四次方的缓动;
Quintic :五次方的缓动;
Sinusoidal:正弦曲线的缓动;
Exponential:指数曲线的缓动;
Circular:圆形曲线的缓动;
Elastic:指数衰减的正弦曲线缓动;
Back:超过范围的三次方缓动);
Bounce:指数衰减的反弹缓动。
每个效果都分三个缓动方式(方法),分别是:
easeIn:从0开始加速的运动;
easeOut:减速到0的运动;
easeInOut:前半段从0开始加速,后半段减速到0的运动。
函数的四个参数分别代表:
t--- current time(当前时间);
b--- beginning value(初始值);
c--- change in value(变化量);
d---duration(持续时间)
运算的结果就是当前的运动路程。可以看到,只有t-current-time是能变化的,这样就支持了根据时间来实现动画。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容

  • 链接 欢迎大家访问我的个人网站四度空间 Fuse? 很多时候,设计师设计一个特效动画出来,用静态的UE是很难向开发...
    Carden阅读 5,857评论 0 1
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,711评论 0 10
  • 主要参考的文章 Zookeeper作用和典型应用场景 Zookeeper作为一个分布式系统,主要用来解决分布式集群...
    walker_liu_fei阅读 373评论 0 0
  • 登山寻隐访古风, 高岳峰回漫天红。 望夫石下三重泪, 远去黄淮无禹同。 倚门三辞只为公, 林海春风凯歌鸣。 听闻涂...
    荷轩画雪阅读 316评论 1 2
  • 第十一章(一)umbrella什么都不知道。他只记得FOX和FLLFFL争吵了起来,然后就没了下文——当时他就是觉...
    汀雨S26阅读 470评论 0 2