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 相关文章推荐
js鼠标左右键 键盘值小结
Jun 11 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP目录操作实例总结
2016/09/27 PHP
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python处理html转义字符的方法详解
2016/07/01 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
公司副总经理任命书
2014/06/05 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
财务负责人岗位职责
2015/02/03 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
贷款工作证明模板
2015/06/12 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL