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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
