相思资源网 Design By www.200059.com

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) "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 "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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
tween.js,动画库

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

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

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。