Как вы думаете, что такое движение объекта? Ответ на этот вопрос также прост,
как и его реализация в JS. Так вот, движение объекта — это изменение его
координат (позиции) в определенный промежуток времени, по определенному закону
движения.
В основе движения, или анимации в Javascript, лежит функция
setInterval. Благодаря ей, мы можем создать таймер с необходимым кодом, который
будет выполняться в заданный промежуток времени. Итак, что же нам нужно в
итоге?
Сперва, необходимо сделать так, чтобы позиционирование объекта не
влияло на остальные HTML-элементы на странице. Для этого, через CSS, зададим ему
свойство position:absolute и укажем начальные координаты. В дальнейшем, весь
скрипт сводиться к получению значений текущих координат и изменению их в CSS,
учитывая закон движения и скорость (шаг в пикселях, за единицу
времени).
Для нашего будущего скрипта мы сделаем также вот что еще:
- возможность изменения скорости движения в любое время (для этого, параметр
отвечающий за скорость, мы создадим не внутри функции, а как свойство объекта
window)
- прямолинейное движение по X и Y осям
- при достижении границ окна браузера, направление движения по каждой из оси
(X и Y), будет меняться на противоположное
- возможность остановки движения в любое время
(clearInterval)
В итоге получился вот такой скрипт:
<script type="text/javascript">
// начальная скорость движения
window.rocketSpeed = 3;
function rocketLauncher( obj, rocket )
{
rocket = (typeof rocket == 'object') ? rocket : document.getElementById( rocket );
rocket.params = {
direction: { 'x': 1, 'y': 1},
borders: {
'x': document.body.clientWidth - rocket.offsetWidth,
'y': document.body.clientHeight - rocket.offsetHeight
}
}
obj.flying = !obj.flying ? true : false;
obj.default_value = ! obj.default_value ? obj.value : obj.default_value ;
if( obj.flying )
{
// устанавливаем первоначальные значения позиции объекта
if( !rocket.style.left ) rocket.style.left = rocket.offsetLeft + 'px';
if( !rocket.style.top ) rocket.style.top = rocket.offsetTop + 'px';
obj.rocket = setInterval(function()
{
// смещение положение объекта
posX = parseInt( rocket.style.left ) + rocketSpeed * rocket.params.direction.x;
posY = parseInt( rocket.style.top ) + rocketSpeed * rocket.params.direction.y;
rocket.style.left = posX + 'px';
rocket.style.top = posY + 'px';
// изменение направления движения при достижении границ окна браузера
if( posX < 0 || posX > rocket.params.borders.x ) rocket.params.direction.x *= -1;
if( posY < 0 || posY > rocket.params.borders.y ) rocket.params.direction.y *= -1;
}, 10);
obj.value = 'Остановить';
}
else {
// остановка движения
clearInterval( obj.rocket );
obj.value = obj.default_value;
}
}
</script>
<input type="button" value="Запустить «ракету»!" onclick="rocketLauncher( this, 'rocket')" />
<input type="button" style="color:#CC3300" value="Медленнее (-1)" onclick="window.rocketSpeed--" />
<input type="button" style="color:#339933" value="Быстрее (+1)" onclick="window.rocketSpeed++" />
<span id="rocket">•</span>
|
