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

2024-12-01 15:36:47

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

在同样的移动距离下，我们鼠标移动的速度快，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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js运动动画的八个知识点

今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父
javascript动画之圆形运动,环绕鼠标运动作小球

代码如下: 复制代码代码如下: <script type="text/javascript"> var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 50; function run(){ if(ball === undefined){ ball = document.createElement("span"); ball.style.position = &
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果.分享给大家供大家参考,具体如下: 基于Sketch.js,实现了物体触碰检测(蝌蚪会遇到障碍物以及聪明的躲避鼠标的点击),随机运动,聚集算法等. 已经具备了游戏的基本要素,扩展一下可以变成一个不错的 HTML5 游戏. 演示效果如下: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-
javascript动画之模拟拖拽效果篇

先看看实现效果图, 模拟拖拽最终效果和在桌面上移动文件夹的效果类似原理介绍鼠标按下时,拖拽开始.鼠标移动时,被拖拽元素跟着鼠标一起移动.鼠标抬起时,拖拽结束所以,拖拽的重点是确定被拖拽元素是如何移动的假设,鼠标按下时,鼠标对象的clientX和clientY分别为x1和x2.元素距离视口左上角x轴和y轴分别为x0和y0 鼠标移动的某一时刻,clientX和clientY分别为x2和y2 所以,元素移动的x轴和y轴距离分别为x2-x1和y2-y1 元素移动后,元素距离视口左上角x轴和y轴的
原生javascript实现匀速运动动画效果

本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;
用js实现的模拟jquery的animate自定义动画(2.5K)

后来发现还不错.不如继续写下去. 这个版本基本上跟jquery的animate一样了. 我是说效果基本上一样了.(效率还没测试过.): 如果有专业测试人员帮我测试下. 1:功能说明兼容主流浏览器. 1:支持回调函数: 2:支持级联动画调用: 3:支持delay动画队列延迟: 4:支持stop停止动画: 5:支持opacity透明度变化: 6:支持+= -= *= /=操作: 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画
JS运动框架之分享侧边栏动画实例

本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
用js模拟JQuery的show与hide动画函数代码

复制代码代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById(id);} //返回dom元素的当前某css值 var getCss = function(obj,name){ //ie if(obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getCompute
js 排序动画模拟冒泡排序

而在某些场景中,队列确实像一支奇兵,可以带来不错的效果,比如配合定时器使用,可以模拟时间差效果复制代码代码如下: function createDq(){ var dq = [], size = 0; return { setDq:function(queue){ dq = queue; size = queue.length; }, queue:function(fn){ size ++; dq.push(fn); }, dqueue:function(){ size --; return
js弹性势能动画之抛物线运动实例详解

抛物线运动就是:当拖拽结束的时候,我们让当前的元素同时水平运动+垂直运动在同样的移动距离下,我们鼠标移动的速度快,move方法触发的次数少,相反移动的速度慢,move方法触发的次数就多->浏览器对于每一次的move行为的触发都是由一个最小时间的. 通过观察,我们发现一个事情:水平方向我们盒子在结束拖拽的时候移动的速度和移动的距离没有必然的联系,和开始拖拽的速度也没有必然的联系,只和最后一次即将松开的那一瞬间鼠标的速度是有关系的,最后瞬间鼠标如果移动的快,我们水平运动的距离和速度也是比较大的.-
Vue.js框架路由使用方法实例详解

Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-
Vue.js进行查询操作的实例详解

Vue.js进行查询操作的实例详解实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>
JS JSOP跨域请求实例详解

在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu
原生js中ajax访问的实例详解

原生js中ajax访问的实例详解 form表单中登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (
jQuery.datatables.js插件用法及api实例详解

1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "
微信小程序引用公共js里的方法的实例详解

微信小程序引用公共js里的方法的实例详解一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag
Android中webview与JS交互、互调方法实例详解

Android中webview与JS交互.互调方法实例详解前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法我们需要实现一个WebViewClient,在这
JS三级联动代码格式实例详解

这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下实现js多级联动的代码格式 <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </h
js对象的读取速度实例详解

1.访问字面量和局部变量最快,而访问数组元素和对象成员相对较慢.访问对象成员时,就像作用域链一样,在原型链上搜索. 2.如果找到的成员在原型链中的位置太深,访问速度就会变慢. 所以要尽量减少对象成员的搜索次数和嵌套深度. 实例 // 进行两次对象成员查找 function hasEitherClass(element, className1, className2) { return element.className === className1 || element.className ==

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

相关推荐

随机推荐