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>



Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка