|
|
|
новичок
участник
Last Login: 19.02.2001 18:59
Сообщ.: 2,
Visits: 23
|
|
еще раз убеждаюсь, что для элементарных вещей на ЯваСкрипт приходится ломать голову.
Задача: добиться движения картинки (с пошаговой мультипликацией!) по ломанной траектории, пусть, например, для простоты по двум отрезкам: А-Б,Б-С.
Задача, в общем, элементарная,
НО!!!: надо реализовать ее не целиковой процедурой, а посредством написания
ПОДПРОГРАММЫ перемещения картинки из точки А в точку Б.
Тогда эту процедуру надо будет просто вызвать 2 раза, для перемещения картинки по указанным двум отрезкам.
Казалось бы элементарно, но я с этим так запарился, что, кажется, уже чешу левой рукой правое ухо.
Написал я такую процедуру для перемещения элемента:
<!--это скрипт самого элемента -->
<div id=stardiv
STYLE="display: block;
position:absolute; left:1px; top=1px">
<img id=star src="star.gif">
</div>
<script>
function MoveByLine (x1,y1,x2,y2, xInc, yInc)
{
//xInc, yInc - шаги изменения координат по осям
//stardiv -это передвигаемый элемент, см. выше
stardiv.style.pixelTop = parseInt(y1);
stardiv.style.pixelLeft =parseInt(x1);
bChangeX=false;
bChangeY=false;
if (x1!=x2)
{
bChangeX=true;
}
if (y1!=y2)
{
bChangeY=true;
}
k=true;
while(k)
{
if (bChangeX)
{
x1=x1+xInc;
stardiv.style.left =parseInt(x1);
if (x1==x2)
{
k=false;
}
}
if (bChangeY)
{
y1=y1+yInc;
stardiv.style.Top =parseInt(y1);
if (y1==y2)
{
k=false;
}
}
//это просто задержка, см. ниже
myDelay(10);
//если включить этот алерт, то будет
//пошаговая мультипликация (читай ниже ***)
// alert('');
}
}
function myDelay(paus)
{
oStartDate= new Date()
EndTime=oStartDate.getTime()+paus;
kk=true;
while (kk)
{
oCurrDate= new Date()
CurrTime=oCurrDate.getTime();
if (CurrTime>=EndTime)
{
kk=false;
}
}
}
//главная функция
function MoveElem()
{
MoveByLine (9,60,9,67, 0, -1);
MoveByLine (9,67,19,67, 1, 0);
}
</script>
в результате вызова этой процедуры:
<!-- ссылка для вызова -->
<a href="Javascript:MoveElem();">Go!</a>
картинка перемещается в точку (9,67) а потом в (19,67) НО без мультипликации, т.е. отображаются только конечные положения.
Причем, если "впилить" в процедуру MoveByLine
вызов alert() (***) после каждого шага - то
пошаговые позиции отображаются. Т.е., видимо, там
нужно применять что-то вроде repaint, но что именно, я не знаю, поэтому вернулся к старому доброму setTimeout.
Здесь с мультипликацией все Ок,
НО! тут главная проблема: как заставить процедуру
перемещения по второму отрезку "ждать своего часа"? Можно, конечно, расчитать, сколько времени потребуется для прохождения по первому отрезку (исходя из длины отрезка, шага и продолжительности таймаута), и для первого вызова
процедуры перемещения по второму отрезку поставить таймаут соответствующий этому времени,
но по-моему это лажа.
Может кто подскажет, как надо "по уму"?
Ну ведь элементарная задача:((
|
|
|
|
|
Junior Member
участник
Last Login: 23.02.2001 17:37
Сообщ.: 19,
Visits: 232
|
|
| У меня на НТ и IE 4 этот пример сначала вообще вызвал "полуподвисание" экплорера, а потом (через некоторое время) предупреждение, что этот скрипт сильно тормозит производительность, и что лучше бы его остановить вообще. Так что тут нужен совершенно другой подход.
|
|
|
|