JS钟摆运动详解
钟摆运动
一个钟摆，一会儿朝左，一会儿朝右，周而复始，来回摆动。钟摆总是围绕着一个中心值在一定范围内作有规律的摆动，这种运动称为钟摆运动，可以把钟摆运动看做圆周运动的一部分，进而比较简单的实现钟摆运动
假设，元素初始时处于钟摆的最底点。当钟摆与竖直线夹角为60度时，为最高点
若钟摆运动的圆心为(x0,y0)，则圆的公式为(x-x0)*(x-x0) + (y-y0)*(y-y0) = r*r
若夹角a为钟摆与竖直线夹角，写成三角函数的形式为
x = x0 + sina*r
y = y0 + cosa*r
当夹角a从0增加到60或减小到-60时，元素开始做反向运动
将钟摆运动写成yyuu.js的形式
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
function pendulMove(json){
//要操作的元素
var obj = json.obj;
//起始方向(顺时针'+'或逆时针'-')
var dir = json.dir;
dir = dir || '+';
//最大次数(再次经过最低点为一次)
var max = json.max;
max = Number(max) || 'all';
//半径
var r = json.r;
r = Number(r) || 100;
//圆心x轴坐标
var x0 = json.x0 || parseFloat(getCSS(obj,'left'));
//圆心y轴坐标
var y0 = json.y0 || parseFloat(getCSS(obj,'top')) - r;
//初始夹角，以角度为单位
var a0 = json.a0;
a0 = Number(a) || 0;
//当前夹角
var a = json.a ||0;
//当前次数
var num = 0;
//清除定时器
if(obj.timer){return;}
//声明当前值cur
var cur = {};
obj.timer = setInterval(function(){
//将这些瞬时值储存在obj对象中的属性中
obj.a = a;
obj.x0 = x0;
obj.y0 = y0;
obj.x = x;
obj.y = y;
obj.num = num;
//如果元素运动到指定圈数则停止定时器
if(num == max){
clearInterval(obj.timer);
}
//起始向右运动
if(dir == '+'){
a++;
if(a == 60){
//方向变成向左
dir = '-';
}
}else{
a--;
if(a == -60){
//方向变成向右
dir = '+';
}
}
//更新当前值
cur.left = parseFloat(getCSS(obj,'left'));
cur.top = parseFloat(getCSS(obj,'top'));
//更新left和top值
var x = x0 + r*Math.sin(a*Math.PI/180);
var y = y0 + r*Math.cos(a*Math.PI/180)
test.style.left = x + 'px';
test.style.top = y + 'px';
},20);
}
下面利用封装的yyuu.js来实现简单的钟摆运动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">起始正向运动</button>
<button id="btn2">起始逆向运动</button>
<button id="btn3">暂停</button>
<button id="reset">还原</button>
<div id="result"></div>
<div id="backup" style="height: 298px;width:298px;border-bottom:1px solid black;border-radius:50%;position:absolute;top:50px;left:50px;">
<div id="test" style="height: 40px;width: 40px;background-color:pink;position:relative;left:130px;top:280px;border-radius:50%"></div>
</div>
<script src="../tu/yyuu.js"></script>
<script>
reset.onclick = function(){
history.go();
}
btn1.onclick = function(){
pendulMove({obj:test,r:150,x0:test.x0,y0:test.y0,a:test.a,num:test.num});
}
btn2.onclick = function(){
pendulMove({obj:test,r:150,dir:'-',x0:test.x0,y0:test.y0,a:test.a,num:test.num});
}
btn3.onclick = function(){
clearInterval(test.timer);
test.timer = 0;
}
</script>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7049.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
