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 Keycode对照表
Oct 24 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 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
mysql 全文搜索 技巧
2007/04/27 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
用js实现放大镜效果
2020/10/28 Javascript
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python chardet库识别编码原理解析
2020/02/18 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
保健品市场营销方案
2014/03/31 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
大学生毕业评语
2014/12/31 职场文书
毕业论文致谢信
2015/05/14 职场文书
实施意见格式范本
2015/06/05 职场文书
公司岗位说明书
2015/10/08 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
用Python将库打包发布到pypi
2021/04/13 Python