русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Запуск и остановка мультипликации


Дата добавления: 2013-12-23; просмотров: 371; Нарушение авторских прав


Обработчик события onLoad

Мультипликация

Естественным продолжением идеи замещения значения атрибута SRC в контейнере IMG является мультипликация, т.е. последовательное изменение значения этого атрибута во времени. Для реализации мультипликации используют метод setTimeout() объекта window (см. лекцию "Программируем свойства окна браузера").

Существует два способа запуска мультипликации: по окончании загрузки страницы ( onLoad ) и при действиях пользователя ( onClick, onChange и т.д.). Наиболее популярный - первый, а именно использование onLoad() и setTimeout().

Событие Load наступает в момент окончания загрузки документа браузером. Обработчик данного события ( onLoad ) указывается в контейнере BODY:

<BODY onLoad="программа JavaScript">

Рассмотрим сначала пример, в котором при загрузке документа начинает выполняться бесконечный цикл изменения картинки:

<SCRIPT>var i=0;function movie(){ document.i.src='images/crou00'+i+'.gif'; i++; if(i>4) i=0; setTimeout('movie();',500);}</SCRIPT><BODY onLoad="movie();"><IMG NAME=i></BODY>

Пример 7.1. Бесконечная мультипликация (html, txt)

Можно реализовать и конечное число циклов мультипликации, скажем 5:

<SCRIPT>var i=0, n=5; // число цикловfunction movie(){ document.i.src='images/crou00'+i+'.gif'; i++; if(i>4) { i=0; n--; } if(n>0) setTimeout('movie();',500);}</SCRIPT><BODY onLoad="movie();"><IMG NAME=i></BODY>

Пример 7.2. Мультипликация с числом циклов n=5 (html, txt)

В обоих примерах следует обратить внимание на использование методаsetTimeout(). На первый взгляд, это просто рекурсия. Но в действительности все несколько сложнее. JavaScript разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнение скриптов следующим образом:



  1. скрипт movie() получает управление от обработчика события onLoad ;
  2. заменяет картинку;
  3. порождает новый скрипт movie() и откладывает его исполнение на 500 миллисекунд;
  4. текущий скрипт movie() уничтожается JavaScript-интерпретатором.

После окончания срока задержки исполнения все повторяется. В первом примере (бесконечное повторение) функция порождает саму себя и, тем самым, поддерживает непрерывность своего выполнения. Во втором примере (конечное число итераций) после нескольких повторов функция не порождается. Это приводит к завершению процесса отображения новых картинок.

Постоянная мультипликация может быть достигнута и другими средствами, например многокадровыми графическими файлами. Однако движение на странице - не всегда благо. Часто возникает желание реализовать запуск и остановить движения по требованию пользователя. Удовлетворим это желание, модифицировав пример с бесконечной мультипликацией:

<SCRIPT>var i=0, flag=true;function movie(){ if(flag) { document.i.src='images/crou00'+i+'.gif'; i++; if(i>4) i=0; } setTimeout('movie();',500);}</SCRIPT><BODY onLoad="movie();"><FORM><INPUT TYPE=button VALUE="Start/Stop" onClick="flag = !flag;"></FORM><IMG NAME=i></BODY>

Пример 7.3. Остановка/запуск мультипликации (поток генерируется постоянно) (html, txt)

Мы ввели булевский flag и меняем изображение на странице, только если он принимает значение true. Нажатие на кнопку меняет значение флага на его отрицание.

Обратите внимание: когда flag имеет значение false, мы просто обходим изменение картинки, но не прекращаем порождение потока. Если бы мы поместили setTimeout() внутрь конструкции if(), то после нажатия на кнопку поток перестал бы порождаться, и запустить мультипликацию заново стало бы нельзя. Однако постоянное генерирование потока - это некоторая растрата ресурсов (памяти, процессора). Нельзя ли сделать оптимальнее? Можно. Этот способ основан на применении метода clearTimeout():

<SCRIPT>var i=0, flag=true, m=null;function movie(){ if(flag) { document.i.src='images/crou00'+i+'.gif'; i++; if(i>4) i=0; } m = setTimeout('movie();',500);}</SCRIPT><BODY onLoad="movie();"><IMG NAME=i><FORM><INPUT TYPE=button VALUE="Start/Stop" onClick="flag = !flag; if(flag) movie(); else clearTimeout(m);"></FORM></BODY>

Пример 7.4. Остановка/запуск мультипликации (поток приостанавливается) (html,txt)

Как видите, достаточно ввести идентификатор потока m и сохранять в нем ссылку на поток при вызове setTimeout(). Тогда в случае необходимости (при нажатии пользователем кнопки) мы можем отменить запланированное выполнение movie() (которое произошло бы через 500 миллисекунд), вызвав метод clearTimeout(m).



<== предыдущая лекция | следующая лекция ==>
Изменение картинки | Оптимизация при загрузке изображений


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.004 сек.