1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

js抛物线运动效果的实现

平面内到定点与定直线的距离相等的点的轨迹叫做抛物线。其中定点叫抛物线的焦点,定直线叫抛物线的准线。抛物线实际上就是一段特殊形式的曲线

 抛物线方程为y=a*x*x+b*x+c

 其中a、b、c为参数,以x为参照的话,当x以固定值递增的方式进行变化时,y也会有相应变化

 若a>0时,抛物线的开口向下;否则,开口向上

 抛物线的准线的x轴坐标为(-2*a/b)。如果target目标设置为100,则(-2*a/b)尽量设置为50

 若a = 0.01,则b=-1

 将抛物线运动写成parabolMove.js的形式

function getCSS(obj,style){      if(window.getComputedStyle){          return getComputedStyle(obj)[style];      }      return obj.currentStyle[style];  }   function parabolMove(json){      //设置要操作的元素      var obj = json.obj;      //设置x轴上的目标值      var target = json.target;      target = Number(target) || 300;      //设置x轴的步长值      var stepValue = json.step || 2;      //设置x轴的步长      var step = 0;      //设置回调函数      var fn = json.fn;      //参数a、b、c      var a = json.a;      a = Number(a) || 0.01;      var b = json.b;      b = Number(b) || -1*target/100;      var c = json.c;      c = Number(c) || 0;      //初始值      var left = parseFloat(getCSS(obj,'left'));      if(left >= target){return;}      var top = parseFloat(getCSS(obj,'top'));       //清除定时器      if(obj.timer){return;}      //声明当前值cur      var cur = {};      obj.timer = setInterval(function(){          //更新步长值          step += stepValue;           //更新left和top值          var x = left + step;          var y = top + a*step*step + b*step + c;          if(x > target){              x = target;          }          test.style.left = x + 'px';          test.style.top = y + 'px';            //如果到达目标点,清除定时器          if(x == target){              clearInterval(obj.timer);              obj.timer = 0;              fn && fn.call(obj);              }        },20);  }

下面利用封装的parabolMove.js来实现简单的抛物线运动

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      </head>  <body>  <button id="btn1">开始运动</button>  <button id="reset">还原</button>  <div id="test" style="height: 40px;width: 40px;background-color:pink;position:absolute;left:0px;top:100px;"></div>    <script src="../js/parabolMove.js"></script>  <script>  reset.onclick = function(){      history.go();  }  btn1.onclick = function(){      parabolMove({obj:test,target:200});  }  </script>  </body>  </html>

原文链接:https://www.qiquanji.com/post/7034.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: