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,我们将及时处理。
微信扫码关注
更新实时通知