欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js学习心得_一个简单的动画库封装tween.js

程序员文章站 2022-05-26 08:58:26
具体代码如下: ~function(){ var myeffect = { linear:function(t,b,c,d){...

js学习心得_一个简单的动画库封装tween.js

具体代码如下:

~function(){
  var myeffect = {
    linear:function(t,b,c,d){
      return c*t/d+b
    },
    quad: {//二次方的缓动(t^2);
      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;
      },
      easeinout: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
      }
    },
    cubic: {//三次方的缓动(t^3)
      easein: function(t,b,c,d){
        return c*(t/=d)*t*t + b;
      },
      easeout: function(t,b,c,d){
        return c*((t=t/d-1)*t*t + 1) + b;
      },
      easeinout: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
      }
    },
    quart: {//四次方的缓动(t^4);
      easein: function(t,b,c,d){
        return c*(t/=d)*t*t*t + b;
      },
      easeout: function(t,b,c,d){
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
      },
      easeinout: 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;
      }
    },
    quint: {//5次方的缓动(t^5);
      easein: function(t,b,c,d){
        return c*(t/=d)*t*t*t*t + b;
      },
      easeout: function(t,b,c,d){
        return c*((t=t/d-1)*t*t*t*t + 1) + b;
      },
      easeinout: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
        return c/2*((t-=2)*t*t*t*t + 2) + b;
      }
    },
    sine: {//正弦曲线的缓动(sin(t))
      easein: function(t,b,c,d){
        return -c * math.cos(t/d * (math.pi/2)) + c + b;
      },
      easeout: function(t,b,c,d){
        return c * math.sin(t/d * (math.pi/2)) + b;
      },
      easeinout: function(t,b,c,d){
        return -c/2 * (math.cos(math.pi*t/d) - 1) + b;
      }
    },
    expo: {//指数曲线的缓动(2^t);
      easein: function(t,b,c,d){
        return (t==0) ? b : c * math.pow(2, 10 * (t/d - 1)) + b;
      },
      easeout: function(t,b,c,d){
        return (t==d) ? b+c : c * (-math.pow(2, -10 * t/d) + 1) + b;
      },
      easeinout: function(t,b,c,d){
        if (t==0) return b;
        if (t==d) return b+c;
        if ((t/=d/2) < 1) return c/2 * math.pow(2, 10 * (t - 1)) + b;
        return c/2 * (-math.pow(2, -10 * --t) + 2) + b;
      }
    },
    circ: {//圆形曲线的缓动(sqrt(1-t^2));
      easein: function(t,b,c,d){
        return -c * (math.sqrt(1 - (t/=d)*t) - 1) + b;
      },
      easeout: function(t,b,c,d){
        return c * math.sqrt(1 - (t=t/d-1)*t) + b;
      },
      easeinout: function(t,b,c,d){
        if ((t/=d/2) < 1) return -c/2 * (math.sqrt(1 - t*t) - 1) + b;
        return c/2 * (math.sqrt(1 - (t-=2)*t) + 1) + b;
      }
    },
    elastic: {//指数衰减的正弦曲线缓动;
      easein: function(t,b,c,d,a,p){
        if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.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;
      },
      easeout: function(t,b,c,d,a,p){
        if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.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);
      },
      easeinout: function(t,b,c,d,a,p){
        if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.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 -.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 )*.5 + c + b;
      }
    },
    back: {//超过范围的三次方缓动((s+1)*t^3 - s*t^2);
      easein: function(t,b,c,d,s){
        if (s == undefined) s = 1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
      },
      easeout: function(t,b,c,d,s){
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
      },
      easeinout: function(t,b,c,d,s){
        if (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;
      }
    },
    zfbounce: {//指数衰减的反弹缓动。
      easein: function(t,b,c,d){
        return c - zhufengeffect.zfbounce.easeout(d-t, 0, c, d) + b;
      },
      easeout: 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 + .75) + b;
        } else if (t < (2.5/2.75)) {
          return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
          return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
      },
      easeinout: function(t,b,c,d){
        if (t < d/2) return zhufengeffect.zfbounce.easein(t*2, 0, c, d) * .5 + b;
        else return zhufengeffect.zfbounce.easeout(t*2-d, 0, c, d) * .5 + c*.5 + b;
      }
    }
  };
  //move:实现多方向的运动动画
  /*
    curele:当前要运动的元素
    target:当前动画的目标位置,存储的是每一个方向的目标位置{left:xxx,top:xxx...}
    duration:当前动画的总时间
  */
  //effect支持以下的情况
  /*
    
  */
  function move(curele,target,duration,effect,callback){
    //处理我们需要的动画效果
    var tempeffect = myeffect.linear;
    if(typeof effect === "number"){
      switch(effect){
        case 0:
          tempeffect = myeffect.linear;
          break;
        case 1:
          tempeffect = myeffect.circ.easeinout;
          break;
        case 2:
          tempeffect = myeffect.elastic.easeout;
          break;
        case 3:
          tempeffect = myeffect.back.easeout;
          break;
        case 4:
          tempeffect = myeffect.bounce.easeout;
          break;
        case 5:
          tempeffect = myeffect.expo.easein;
      }
    }else if(effect instanceof array){
      tempeffect = effect.length>=2 ? myeffect[effect[0]][effect[1]] : myeffect[effect[0]]
    }else if(typeof effect === "function"){
      //我们的实际意义应该是:effect是不传递值的,传递进来的函数应该是回调函数的值
      callback = effect;
    }

    //在每一次执行方法之前,首先把当前元素之前正在运行的动画结束掉
    window.clearinterval(curele.timer);
    //根据target获取每一个方向的起始值begin和总距离change
    var begin = {},change = {};
    for(var key in target){
      if(target.hasownproperty(key)){
        begin[key] = utils.css(curele,key)
        change[key] = target[key] - begin[key];

      }
    }
    //实现多方向的运动动画
    var time = 0;
    curele.timer = window.setinterval(function(){
      time+=10;
      //到达目标:结束动画,让当前元素的样式值等于目标样式值
      if(time>=duration){
        utils.css(curele,target);
        window.clearinterval(curele.timer);
        //在动画结束的时候,如果用户把回调函数传递给我了,我就把用户传递的回调函数执行,不仅执行还把this的指向改为当前操作的元素

        typeof callback === "function" ? callback.call(curele) : null;
        //或者callback && callback()
        return;
      }
      //没到达目标:分别获取每一个方向的当前位置,给当前位置设置样式即可。
      for(var key in target){
        if(target.hasownproperty(key)){
          var curpos = tempeffect(time,begin[key],change[key],duration);
          utils.css(curele,key,curpos);
        }
      }
    },10)
  }

  window.myanimate = move;
}()

以上这篇js学习心得_一个简单的动画库封装tween.js就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。