Javascript движение точки по окружности
Писал скриптик для портфолио недавно и там, в одной из задач, было необходимо реализовать движение точки по окружности. Провозившись пол часа написал универсальную функцию для реализации данной задачи.
Входящие параметры функции:
alfa – начальный угол
beta – на какой угол повернуть
dalfa – шаг угловой
ro – направление вращения 0 по часовой 1 против часовой
x – координаты точки по оси х
y – координаты точки по оси у
centrX – координата центра по оси х
centrY – координата центра по оси у
Radius – радиус
obid – id объекта
timeout – временной интервал
Для решения поставленной задачи нам необходимо вспомнить школьный курс математики
а именно перевод градусов в радианы, вспомнить, что такое период, синусы и косинусы
если вы этого всего не помните то переписать под себя вы врятли сможете скрипт.
Вот пример моего решения
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<html>
<head> <script type="text/javascript"> var x,y,obj,corner; var pi=Math.PI; // считаем число пи function init_move_round(alfa,dalfa,beta,ro,centrX,centrY,Radius,obid,timeout) { var obj=document.getElementById(obid); x=obj.offsetLeft; y=obj.offsetTop; moveR(alfa,dalfa,beta,ro,x,y,centrX,centrY,Radius,obid,timeout); } function moveR(alfa,dalfa,beta,ro,x,y,centrX,centrY,Radius,obid,timeout){ /* alfa - начальный угол beta - на какой угол повернуть dalfa - шаг угловой ro - направление вращения 0 по часовой 1 против часовой x - координаты точки по оси х y - координаты точки по оси у centrX - координата центра по оси х centrY - координата центра по оси у Radius - радиус obid - id объекта timeout - временной интервал */ if(alfa==360||alfa==-360) alfa=0; obj=document.getElementById(obid); obj.style.left=x+"px"; obj.style.top=y+"px"; corner=2*pi-alfa/180*pi; // переводим градусы в радианы с учетом периода в 2 пи x = parseInt(Radius*Math.cos(corner) + centrX); // считаем новые координаты точки по оси х y = parseInt(Radius*Math.sin(corner) + centrY); // считаем новые координаты по оси у if(ro==1) alfa+=dalfa; else alfa-=dalfa; // определяем куда нам откладывать угол beta-=dalfa; if(beta>0) setTimeout("moveR("+alfa+","+dalfa+","+beta+","+ro+","+x+","+y+","+centrX+","+centrY+","+Radius+",'"+obid+"',"+timeout+")" , timeout); else return true; // рекурсивно замыкаем нашу функцию для эфекта вращения } </script> </head> <body> <input type="button" onclick="init_move_round(90,1,45,1,200,300,100,'move',20)" /> <div id="move" style="position:absolute;height:3px;width:3px;background-color:#000000;left:200px;top:200px"></div> </body> </html> |
Рекомендуем почитать