js学习总结----弹性势能动画之抛物线运动

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

在同样的移动距离下，我们鼠标移动的速度快，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.οnmοuseup= 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.οnmοuseup= null;}else{document.onmousemove = null;document.onmouseup= null;//这样绑定的话，move和up绑定的this都是document
            }//当鼠标离开结束拖拽的时候，我们开始进行水平方向的动画运动fly.call(this);//当鼠标离开结束拖拽的时候，我们开始进行垂直方向的动画运动drop.call(this);}//当鼠标移动过快的时候，我们的鼠标会脱离盒子，导致盒子的mousemove和mouseup事件都移除不到->"鼠标焦点丢失"//在IE和火狐浏览器中，我们用一个方法把盒子和鼠标绑定在一起即可。//鼠标再快也跑不出去文档:我们把mousemove和mouseup绑定给documentfunction 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>

转载于:https://www.cnblogs.com/diasa-fly/p/7244638.html

js学习总结----弹性势能动画之抛物线运动相关推荐

Three.js学习六——模型动画
目录 Three.js动画系统(Animation system) 实现流程基本流程工程文件场景搭建添加模型模型动画动画实现的基本流程相关对象方法和代码完整代码和实现效果 Three. ...
Three.js学习七——播放模型动画时模型沿着轨迹移动
目录效果描述实现流程基本流程工程文件搭建场景添加模型和播放动画添加路径和模型移动完整代码和实现效果效果描述在播放导入的模型动画同时,让模型沿着预定路径轨迹移动.例如导入一个会跑步动 ...
android扑克发牌动画,JS实现纸牌发牌动画
本文实例为大家分享了JS实现纸牌发牌动画的具体代码,供大家参考,具体内容如下先看演示游戏构建准备 1.准备52张纸牌 2.一张桌布 3.编辑工具为 Visual Code 技术概要 1.对象操作 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
html盒子移动动画代码,js实现盒子移动动画效果
本文实例为大家分享了js实现盒子移动动画效果的具体代码,供大家参考,具体内容如下 content="width=device-width, user-scalable=no, initial ...
javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
Wow.js学习笔记
Wow.js学习笔记前期准备注意:通过引入cdn的树懒,注意版本问题(小白我就是因为失败就去乖乖下载wow.js本地文件) 1.wow.js 因依赖于animate.css,首先在头部引用anim ...

js学习总结----弹性势能动画之抛物线运动

js学习总结----弹性势能动画之抛物线运动相关推荐

最新文章

热门文章