Добавляем...


Основы анимации
Данный пример иллюстрирует простейшие варианты ж пользования JavaScript для анимации. Мы организуем движение объекта вверх и вниз (а также влево и вправо) к заданным координатам. Основной идеей будет выяснение текущих координат объекта с последующим постепенным перемещением объекта по экрану с помощью функций setX () и setY () из нашей библиотеки функций слоя. Сначала мы добавим простые функции getX (имяСлоя) и getY (имяСлоя), которые возвращают координаты слоя, имя которого передается им в виде параметра. Вот программный код этих функций.

/* возвращает координату х слоя с именем layerName */
function getX(layerName)
{
var theLayer = getElement(layerName);
if layerobject)
return(parseInt(theLayer.left));
else
return(parseInt(theLayer.style.left)) ;
}

/* возвращает координату у слоя с именем layerName */
function getY(layerName)
{
var theLayer = getElement(layerName);
if (layerobject)
return (parseInt(theLayer.top));
else
return(parseInt(theLayer.style.top));
}

Теперь мы должны определить некоторые переменные, чтобы указать, насколько пикселей следует смещаться за один шаг (step) и как быстро обновлять фреймы (framespeed).

/* установка шага и скорости анимации */
var step = 3;
var framespeed = 35;

Следует также определить границы перемещения для нашего объекта, чтобы он не "столкнулся" с элементами управления формы, с помощью которых мы будем управлять движением объекта.

/* установка границ анимации*/
var maxtop = 100;
var maxleft = 100;
var maxbottom = 400;
var maxright = 600;


Затем мы добавляем процедуры перемещения объекта в нужном направлении, пока он не достигает границы. Основной идеей является выяснение текущей координаты объекта и (если граница еще не достигнута) перемещение объекта ближе к границе путем добавления или вычитания значения step с последующей установкой таймера для продолжения движения. Ниже в качестве примера представлена функция right (). В данном случае она перемещает регион с именем "ufo" вправо, пока не будет достигнута правая граница, определенная значением maxright.

function right()
{
currentX = getX('ufo');

if (currentx < maxright)
{
currentX+=step;
setX ('ufo',currentX);
move=setTimeout("right()",(1000/framespeed));
}
else
clearTimeout(move);
}

Ниже приводится полный текст сценария.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd11>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>НЛО</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<script src="layerlib.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
/* возвращает координату х слоя с именем layername */
function getX(layername)
{
var theLayer = getElement(layername);
if (layerobject)
return(parseInt(theLayer.left));
else
return(parseInt(theLayer.style.left));
}

/* возвращает координату у слоя с именем layerName */
function getY(layerName)
{
var theLayer = getElement(layerName);
if (layerobject)
return(parseInt(theLayer.top) );
else
return(parseInt(theLayer.style.top));
}

/* установка шага и скорости анимации */
var step = 3;
var framespeed = 35;

/* установка границ анимации */
var maxtop = 100;
var maxleft = 100;
var maxbottom = 400;
var maxright = 600;

/* движение вверх до границы */
function up()
{
var currentY = getY('ufo');
if (currentY > maxtop)
{
currentY-=step;
setY('ufо',currentY);
move=setTimeout("up()", (1000/framespeed));
}
else
clearTimeout(move);
}

/* движение вниз до границы */
function down()
{
var currentY = getY('ufo'); if (currentY < maxbottom)
{
currentY+=step;
setY('ufo1,currentY);
move=setTimeout("down()", (1000/framespeed));
}
else
clearTimeout(move);
}
/* движение влево до границы */
function left()
{
var currentx = getX('ufo');
if (currentx > maxleft)
{
currentX-=step;
setX('ufo',currentX);
move=setTimeout("left ()", (1000/framespeod));
}
else
clearTimeout(move);
}

/* движение вправо до границы */
function right()
{
var currentX = getX('ufo');
if (currentX < maxright)
{
currentX+=step;
setX ('ufo',currentX);
move=setTimeout("right()",(1000/framespeed));
}
else
clearTimeout(move);
}
//-->
</script>
</head>
<body background="space_tile.gif">

<div id="ufo" style="position:absolute; left:200px; top:200px; width:24lpx; height:178px; z-index:1;">
<img src="space_ufo.gif" width="148" height="141" alt="ufo!" />
</div>

<form action="#" method="get">
<input type="button" value="ввepx" onclick="up();" />
<input type="button" value="вниз" onclick="down();" />
<input type="button" value="влeвo" onclick="left();" />
<input type="button" value="вправо" onclick="right();" />
<input type="button" value="стоп" onclick="clearTimeout(move); "' />
</form>
</body>
</html>

Можно изменить этот пример анимации так, чтобы использовалось несколько регионов, а движение происходило по заданной траектории. Но главным здесь является вопрос, нужно ли это?
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика