Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Странное поведение анимации. (https://javascript.ru/forum/misc/23033-strannoe-povedenie-animacii.html)

Questioner 09.11.2011 19:01
Странное поведение анимации.
 
Здравствуйте! Я прочел статью http://beta.javascript.ru/tutorial/animation и попытался сделать маятник. получилось вот: 
<!DOCTYPE HTML>
<html>
<body onload = "move(document.getElementById('a'))">   

  <script>
function move(el) {
  var i = 0, fading = 180;
  el.style.left = 0;
  el.style.top = 0;
  function fc() {
  left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180);
  el.style.left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180) + "px";
  el.style.top = ((left / 320) * 320) + "px";
  i++;
  fading -= 0.125;
  if(fading <= 0) {clearInterval(b)}
  };
  var b = setInterval(fc, 10);
}
  </script>
  <div style = "height: 320px; width: 320px; position: absolute; left: 295px">
<div style="height: 20px; width: 20px; background-color: blue; position: absolute; left: 0px; top: 0px" id = "a" onclick = "move(this)"></div>
</div>
</body>
</html>

скажите пожалуйста, что я делаю не так?

ksa 10.11.2011 09:25
Цитата:
Сообщение от Questioner
попытался сделать маятник
Раньше я маятник представлял себе иначе... :D Или это какой-то броуновский маятник?

fiw 10.11.2011 13:43
Я полагаю что у вас проблемы именно с математическими операциями.
У вас получилась какая-то парабола неправильная)
Может быть код верный, а неточности проявляются от того, что при расчетах выводятся, числа с плавающей запятой. Точно не могу сказать. Я не знаю как сам маятник устроен.

ksa 10.11.2011 13:49
Цитата:
Сообщение от fiw
Я не знаю как сам маятник устроен.
Приезжай к нам в волгоградский планетарий - я тебе покажу... :D
http://volgogradplanetarium.volgadmin.ru/starhall.aspx
на фотке мало что видно... :(

Цитата:
Сообщение от fiw
У вас получилась какая-то парабола неправильная
И парабола вычисляется по формуле
y=A*(x*x)+B*x+C
где A, B и C константы из множества R... А никак не sin() и cos(). ;)

Questioner 10.11.2011 21:48
На основе этого кода придумал игру: поймай квадратик
<!DOCTYPE HTML>
<html>
<body onload = "move(document.getElementById('a'))">   

  <script>
var b;
function move(el) {
  var i = 0, fading = 180;
  el.style.left = 0;
  el.style.top = 0;
  function fc() {
  el.style.left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180) + "px";
  el.style.top = (Math.abs(Math.sin((i-fading/2)/180*Math.PI) * el.parentNode.clientHeight)) + "px";
  i++;
  fading -= 0.125;
  if(fading <= 0) {clearInterval(b); alert("Вы проиграли!"); document.getElementById("a").onclick = function() {alert("Поздно!")}}
  };
  b = setInterval(fc, 10);
}
  </script>
  <div style = "height: 295px; width: 320px; position: absolute; left: 295px">
<div style="height: 40px; width: 40px; background-color: blue; position: absolute; left: 0px; top: 0px" id = "a" onclick = "alert('Вы выиграли!'); clearInterval(b); this.onclick = function() {}"></div>
</div>
</body>
</html>

Questioner 15.11.2011 17:04
Кстати, маятник движется по сектору окружности, а не по параболе

trikadin 15.11.2011 17:08
Цитата:
Сообщение от Questioner
На основе этого кода придумал игру: поймай квадратик
Улучшать и улучшать)


Часовой пояс GMT +3, время: 09:34.