Движение картинки по ломанной траектории

29.04.2007, 20:29. **Показов** 4097. **Ответов** 2

Студворк — интернет-сервис помощи студентам

еще раз убеждаюсь, что для элементарных вещей на ЯваСкрипт приходится ломать голову.

Задача: добиться движения картинки (с пошаговой мультипликацией!) по ломанной траектории, пусть, например, для простоты по двум отрезкам: А-Б,Б-С.

Задача, в общем, элементарная,
НО!!!: надо реализовать ее не целиковой процедурой, а посредством написания
ПОДПРОГРАММЫ перемещения картинки из точки А в точку Б.

Тогда эту процедуру надо будет просто вызвать 2 раза, для перемещения картинки по указанным двум отрезкам.

Казалось бы элементарно, но я с этим так запарился, что, кажется, уже чешу левой рукой правое ухо.

Написал я такую процедуру для перемещения элемента:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!--это скрипт самого элемента -->
 
<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.

Здесь с мультипликацией все Ок,
НО! тут главная проблема: как заставить процедуру
перемещения по второму отрезку 'ждать своего часа'? Можно, конечно, расчитать, сколько времени потребуется для прохождения по первому отрезку (исходя из длины отрезка, шага и продолжительности таймаута), и для первого вызова
процедуры перемещения по второму отрезку поставить таймаут соответствующий этому времени,
но по-моему это лажа.

Может кто подскажет, как надо 'по уму'?
Ну ведь элементарная задача

(

@Vund · 06.05.2007, 17:44

У меня на НТ и IE 4 этот пример сначала вообще вызвал 'полуподвисание' экплорера, а потом (через некоторое время) предупреждение, что этот скрипт сильно тормозит производительность, и что лучше бы его остановить вообще. Так что тут нужен совершенно другой подход.

@alekola · 20.12.2012, 02:17

Идите в раздел Javascript скриптописальщики
Я не понимаю как можно не видеть разницы, ваш JS это не Java

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Vund 0 / 0 / 0 Регистрация: 03.05.2007 Сообщений: 15
	06.05.2007, 17:44
	У меня на НТ и IE 4 этот пример сначала вообще вызвал 'полуподвисание' экплорера, а потом (через некоторое время) предупреждение, что этот скрипт сильно тормозит производительность, и что лучше бы его остановить вообще. Так что тут нужен совершенно другой подход. 0

@alekola 22 / 22 / 6 Регистрация: 04.08.2011 Сообщений: 103
	20.12.2012, 02:17
	Идите в раздел Javascript скриптописальщики Я не понимаю как можно не видеть разницы, ваш JS это не Java 0