Javascript-форум - Показать сообщение отдельно

x-yuri · #45 (**permalink**) 11.12.2010, 10:27

Сообщение от vyazovetskova

Передо мной встала задача сделать анимацию на js. Но не просто анимацию, а еще и такую, чтобы она реагировала на события. (Анимация не может реагировать на события, т.е. с точки зрения пользователя - может, но мы ведь программисты) Конкретно это было так: есть объект (у меня была улитка), который постоянно поднимается вверх до определенного уровня, потом падает вниз и опять поднимается и т.д...При клике на объект он должен упасть. Задачка с подвохом. Дело в том, что в js нет паралельности. (Потому что ее в программировании быть не может, параллельность есть в математике) Казалось бы, такую задачу можно решить использовав объекты. (Такое впечатление, что объекты могут помочь решить проблему "отсутствия параллельности") Но в js объектов как таковых нет. (В js есть объекты) Объектами называются обычные хэши. (В js нету хэшей, просто бывает можно рассматривать некоторые объекты как хэши) На ум пришло одно: немного подвинуть объект, проверить был ли клик или не достиг ли он пиковой вершины. Если был клик или вершина достигнута,то уронить объект. Если ни того, ни другого не произошло- подвинуть еще выше. (Более понятный вариант: "Выполнять анимацию в n шагов, проверяя, был ли клик в конце каждого шага") Код, который я приведу ниже, в принципе так и делает, но более изящно с помощью setTimeout. (Значит раньше у нас была проблема параллельности, а теперь мы уже считаем, что это совсем даже не проблема и эта перпендикулярность приводит нас к изящному решению) Зададим (математическая терминология детектед) 2 функции : начать движение(возвращает элемент на стартовую позицию, обуляет высоту) и двигаться вверх. Собственно. код:
function begin(x){ //x- высота, на которой сейчас находится улитка (высота, на которую нужно скинуть улитку)
H=0;
$('#snail').animate({top:'+='+x},1000); //возвращает улитку в начальное положение
goes_up(); // мы скинули улитку и начали движение вверх
}

function goes_up(){
H++;
$('#snail').animate({top:'-='+speed},1000);
if (H<(maxH/speed)){
timer = setTimeout("goes_up()",1000);
}
else {begin(maxH)}
}

H=0;//высота улитки
maxH=180; //максимальная высота, на которую может забраться улитка (какой же это maxH? это max(H*speed))
speed=3; //сколько улитка проползет на секунду
begin(0);

$('#snail').click(function(){
clearTimeout(timer); //сбрасывает setTimeOut
begin(H*speed); //сначала уронит улитку, а потом опять начнет движение
});

подробнее о setTimeOut и clearTimeOut можно прочесть тут :www.w3schools.com/js/js_timing.asp

к тому же код какой-то запутанно-замороченный

<!DOCTYPE HTML>
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>

  <div id="snail" style="
    position: absolute;
    top: 100px;
    width: 20px;
    height: 20px;
    background: red;
  "></div>
  
  <script type="text/javascript">
      function go(){
          $('#snail').animate({top: '-=100'}, {duration: 3000});
          $('#snail').animate({top: '+=100'}, {duration: 500, complete: go});
      }
      $('#snail').click(function(){
          $('#snail').stop(true);
          $('#snail').animate({top: '100'}, {duration: 500, complete: go});
      });
      
      go();
  </script>
  </body>
</html>