js学习心得

分类：Web前端作者：编程之家用户

具体代码如下：

~function(){
  var myEffect = {
    Linear:function(t,b,c,d){
      return c*t/d+b
    },Quad: {//二次方的缓动（t^2）；
      easeIn: function(t,d){
        return c*(t/=d)*t + b;
      },easeOut: function(t,d){
        return -c *(t/=d)*(t-2) + b;
      },easeInOut: function(t,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,d){
        return c*(t/=d)*t*t + b;
      },d){
        return c*((t=t/d-1)*t*t + 1) + b;
      },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,d){
        return c*(t/=d)*t*t*t + b;
      },d){
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
      },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,d){
        return c*(t/=d)*t*t*t*t + b;
      },d){
        return c*((t=t/d-1)*t*t*t*t + 1) + b;
      },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,d){
        return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
      },d){
        return c * Math.sin(t/d * (Math.PI/2)) + b;
      },d){
        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
      }
    },Expo: {//指数曲线的缓动（2^t）；
      easeIn: function(t,d){
        return (t==0) ? b : c * Math.pow(2,10 * (t/d - 1)) + b;
      },d){
        return (t==d) ? b+c : c * (-Math.pow(2,-10 * t/d) + 1) + b;
      },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,d){
        return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
      },d){
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
      },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,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;
      },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);
      },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,s){
        if (s == undefined) s = 1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
      },s){
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
      },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,d){
        return c - zhufengEffect.zfBounce.easeOut(d-t,d) + b;
      },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;
        }
      },d){
        if (t < d/2) return zhufengEffect.zfBounce.easeIn(t*2,d) * .5 + b;
        else return zhufengEffect.zfBounce.easeOut(t*2-d,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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程小技巧。

您可能感兴趣的文章:

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

使用input+datalist简单实现实时匹配的可编辑下拉列表-并解决选定后浏览器默认只显示value的可读性问题
问题背景 最近小伙伴提了一个希望提高后台下拉列表可操作性的需求，原因是下拉列表选项过多，每次下拉选择比较费时费力且容易出错，硬着头皮啃了啃前端知识，网上搜寻了一些下拉列表实现的资料，这里总结一下。 P
前端js生成任意随机数
// n位随机数生成 function randomNum(n) { let sString = &quot;&quot;; let strings = &quot;abcdefghijklmnopq
Web前端：HTML最强总结 附详细代码
HTML是HyperText Markup Language的简称，中文名称:超文本标记语言，它是一种用于创建网页的 标准标记语言
Web前端：CSS最强总结 附详细代码
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
Web前端：JavaScript最强总结 附详细代码 带常用案例！
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
糟糕的设计会为我们的工作带来什么启发？
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 一名开发者或设计师通常可以在一秒内指出优秀的设计，但对于糟糕的设计只需最多半
想实现多人协作的“在线Excel”？真没那么简单
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 Excel是我们办公中常用的工具 ，它几乎能为我们处理大部分数据，友好的交互
怎样使我们的用户不再抵触填写Form表单？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/8-tips-for-an-awesome-sign
不要再造轮子了：聊一聊 JavaScript 的 URL 对象是什么？
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 如果我们自己编写从URL中分析和提取元素的代码，那么有可能会比较痛苦
Deno会在短期内取代Node吗？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/what-is-deno-and-will-it-r
您知道SASS吗？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/4-reasons-to-use-sass-in-y
还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/vuejs-3-0-0-beta-features-
SessionStorage、LocalStorage详解
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/sessionstorage-and-localst
详细了解JS Map，它和传统对象有什么区别？
一直以来，JavaScript使用数组和对象来定义和存放结构化数据， 在这篇文章中，我们将一起深挖另一种对象Map的一切，我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。
合理使用CSS框架，加速UI设计进程
由于CSS的出现，现在的网站风格已经与它们很早之前的样子有了很大的不同。CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使
开发一个渐进式Web应用程序PWA前都需要了解什么？
自苹果推出了iPhone应用商店以来，App成为了我们生活中不可或缺的一部分，而对于实体业务也是如此，现在各行业都在推出自己的App，但有没有人想过这样一种场景，如果自己的潜在客户还没有安装你的App
前端开发：这10个Chrome扩展你不得不知
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/10-top-chrome-extensions-f
你的按钮到底在帮助用户还是在误导用户？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/do-your-buttons-lead-or-mi
三步带你开发一个短链接生成平台
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 前段时间在开发【葡萄城社区】公众号时有一个功能是需要用网页授权认证地址生成二
给萌新HTML5 入门指南
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 HTML5的发展改变了互联网技术趋势，前端热度依旧不减，所以对于应用开发人员
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot