js弹性势能动画之抛物线运动实例详解


Posted in Javascript onJuly 27, 2017

抛物线运动就是:当拖拽结束的时候,我们让当前的元素同时水平运动+垂直运动

在同样的移动距离下,我们鼠标移动的速度快,move方法触发的次数少,相反移动的速度慢,move方法触发的次数就多->浏览器对于每一次的move行为的触发都是由一个最小时间的。

通过观察,我们发现一个事情:水平方向我们盒子在结束拖拽的时候移动的速度和移动的距离没有必然的联系,和开始拖拽的速度也没有必然的联系,只和最后一次即将松开的那一瞬间鼠标的速度是有关系的,最后瞬间鼠标如果移动的快,我们水平运动的距离和速度也是比较大的。->获取鼠标最后一次即将松开时候的速度。

在JS盒子模型中,offsetLeft是获取当前元素的左偏移,获取到的值永远不会出现小数,  他会把真实的left值按照小数点的四舍五入进行计算

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  *{
   margin:0;
   padding:0;
  }
  html,body{
   width:100%;
   height:100%;
  }
  #box{
   position:absolute;
   top:50%;
   left:50%;
   width:200px;
   height:200px;
   background:#ff6600;
   margin:-100px 0 0 -100px;
   cursor:move;
   /*
    不知道宽高的情况下的居中
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
   */ 
  }
 </style>
</head>
<body>
 <div id='box'>
  
 </div>
 <script>
  //JS实现让当前的元素在屏幕居中的位置
  var box = document.getElementById('box');
  // box.style.top = ((document.documentElement.clientHeight || document.body.clientHeight)-box.offsetHeight)/2 + "px";

  // box.style.left = ((document.documentElement.clientWidth || document.body.clientWidth)-box.offsetWidth)/2 + "px";
  //拖拽的原理
  /*
   当鼠标在盒子上按下的时候,我们开始拖拽(给盒子绑定onmousemove和onmouseup),当鼠标移动的时候,我们计算盒子的最新位置
   当鼠标抬起的时候说明拖拽结束了,我们的move和up就没用了,我们再把这两个方法移除
  */
  box.onmousedown = down;
  function down(e){
   e = e || window.event;
   //记录开始位置的信息
   this["strX"] = e.clientX;
   this["strY"] = e.clientY;
   this["strL"] = parseFloat(this.style.left);
   this["strT"] = parseFloat(this.style.top);
   //给元素绑定移动和抬起的事件
   if(this.setCapture){
    this.setCapture()//把当前的鼠标和this绑定在一起
    this.onmousemove = move;
    this.onmouseup= up;
   }else{
    var _this = this;
    document.onmousemove = function(e){
     // move(e)//这个里面的this是window
     move.call(_this,e);
    }
     ;
    document.onmouseup= function(e){
     up.call(_this,e);
    };
   }
   //当盒子运动中我们想要执行下一次拖拽,我们按下鼠标,但是由于盒子还是运动着呢,导致鼠标抓不住盒子->在按下的同时我们应该停止盒子的运动
   window.clearInterval(this.flyTimer);
   window.clearInterval(this.dropTimer);
   
  }
  function move(e){
   e = e || window.event;
   var curL = (e.clientX-this["strX"])+this["strL"];
   var curT = (e.clientY-this["strY"])+this["strT"];
   //边界判断
   var minL = 0,minT = 0,maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth,maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
   curL = curL < minL ? minL :(curL > maxL ? maxL : curL);
   curT = curT < minT ? minT :(curT > maxT ? maxT : curT)
   this.style.left = curL + "px";
   this.style.top = curT + "px";

   //计算我们水平方向移动的速度
   /*
    在浏览器最小反应时间内触发一次move,我们都记录一下当前盒子的位置,让当前的位置-上一次记录的位置=当前最后一次的偏移
   */
   if(!this.pre){
    this.pre = this.offsetLeft;
   }else{
    this.speedFly = this.offsetLeft - this.pre;
    this.pre = this.offsetLeft;
   }
  }
  function up(e){
   if(this.releaseCapture){
    this.releaseCapture();//把当前的鼠标和盒子解除绑定
    this.onmousemove = null;
    this.onmouseup= null;
   }else{
    document.onmousemove = null;
    document.onmouseup= null;
    //这样绑定的话,move和up绑定的this都是document
   }
   //当鼠标离开结束拖拽的时候,我们开始进行水平方向的动画运动
   fly.call(this);
   //当鼠标离开结束拖拽的时候,我们开始进行垂直方向的动画运动
   drop.call(this);
   
  }
  //当鼠标移动过快的时候,我们的鼠标会脱离盒子,导致盒子的mousemove和mouseup事件都移除不到->"鼠标焦点丢失"
  //在IE和火狐浏览器中,我们用一个方法把盒子和鼠标绑定在一起即可。
  //鼠标再快也跑不出去文档:我们把mousemove和mouseup绑定给document
  
  
  function fly(){
   //this->当前要操作的盒子
   var _this = this;
   _this.flyTimer = window.setInterval(function(){
    //我们运动的速度是一直在减慢的,一直到停止("指数衰减运动")
    //this->window
    //盒子停止运动,清除定时器:利用offsetLeft获取的值不会出现小数,对小数部分进行了四舍五入,所以我们加上或者减去一个小于0.5的速度值,其实对于盒子本身的位置并没有发生实质的改变,我们认为此阶段的盒子就停止运动了。

    if(Math.abs(_this.speedFly)<0.5){
     window.clearInterval(_this.flyTimer);
     return;
    }
    _this.speedFly*=0.98;
    var curL = _this.offsetLeft + _this.speedFly;
    var minL = 0,maxL = (document.documentElement.clientWidth || document.body.clientWidth) - _this.offsetWidth;
    if(curL>=maxL){
     _this.style.left = maxL + "px";
     _this.speedFly*=-1;
    }else if(curL<=minL){
     _this.style.left = minL + "px";
     _this.speedFly*=-1;
    }else{
     _this.style.left = curL;
    }
   },10)
   

  }

  function drop(){
   var _this = this;
   _this.dragFlag = 0;
   _this.dropTimer = window.setInterval(function(){
    if(_this.dragFlag>1){//到底的时候dragFlag就大于1了
     window.clearInterval(_this.dropTimer);
     return;
    }
    _this.dropSpeed = !_this.dropSpeed ? 9.8 : _this.dropSpeed + 9.8;
    //衰减
    _this.dropSpeed*=0.98;
    var curT = _this.offsetTop + _this.dropSpeed;
    var maxT = (document.documentElement.clientHeight || document.body.clientHeight) - _this.offsetHeight;
    if(curT >= maxT){// 到底了
     _this.style.top = maxT + "px";
     _this.dropSpeed*=-1;
     _this.dragFlag++;
    }else{
     _this.style.top = curT + "px";
     _this.dragFlag = 0;
    }
   })
   
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 #Javascript
Angular指令之restict匹配模式的详解
Jul 27 #Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 #Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 #Javascript
Angularjs的键盘事件的绑定
Jul 27 #Javascript
Angularjs 事件指令详细整理
Jul 27 #Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 #Javascript
You might like
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
一个SQL面试题
2014/08/21 面试题
计算机应用专业毕业生求职信
2014/06/03 职场文书
中层干部培训方案
2014/06/16 职场文书
小学班级特色活动方案
2014/08/31 职场文书
旷课检讨书范文
2015/01/27 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript