Мультипликация в JavaScript.

«Мультипликация» – одиннадцатый урок учебника JavaScript. В этом уроке мы обсудим особенности создания мультипликации мультипликации в JavaScript. Мультипликация позволяет создавать достаточно интерестные эффекты, которые удачно впишутся в дизайн вашего сайта.

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

Мультипликация JS позволяет создавать достаточно интерестные эффекты. Для мультипликации нам потребуется уже хорошо нам знакомый метод Window — setTimeout().

Теперь нам осталось определиться только со способом запуска мультипликации. Запустить мультипликацию можно любым из известных нам обработчиков событий (onLoad(); onClick();), перехватом URL и многими другими способами.

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

Сама по себе мультипликация является простой заменой картинок, происходящей по определенному условию.

Как всегда небольшой пример:

<script> i=1; function run1() { eval("document.i2.src=' ../img/run"+i+".gif'"); i++; if(i>3) i=1; setTimeout("run1();",500); } </script> <a href=" javascript:run1();void(0);"> <img name="i2" src=" ../img/run1.gif"> </a>

Наверх

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

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

Уметь запустить мультипликацию конечно хорошо, но нередко возникает необходимость управлять воспроизведением мультипликации. Например создание слайд–шоу на вашей странице, которое может быть запущенно и остановленно путем нажатия на различные элементы управления.

Рассмотрим простой пример, реализующий управление воспроизведением анимации:

<script> i=1; flag=0; function run3() { if (flag==0) { eval("document.i3.src=' ../img/run"+i+".gif'"); i++; if(i>3) i=1; } setTimeout("run3();",500); } </script> <form > <input type="button" onClick="if (flag==0) flag=1; else flag=0" value="остановить/возобновить"> </form> <a href="javascript:run3(); void(0);"> <img name="i3" src=" ../img/run1.gif"> </a>

Наверх

В нашем примере мы создаем дополнительную кнопку изменяющую переменную flag с 0 на 1 при нажатии. И немного доработали наш скрипт. Теперь внутри скрипта происходит проверка условия равна ли переменная flag 0 и если равна, то происходит отображение анимации, а если нет то картинка остается статической.

Конечно это далеко не единственный способ управления мультипликацией. Ведь например, можно использовать метод clearTimeout().

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

В этом уроке мы немного углубились в тему работы с графикой в JavaScript и научились создавать анимацию. Использование анимации может оказаться вам очень полезным при создании собственного динамического сайта, например для создания объемного эффекта освещения для страниц вашего сайта, но это уже другая история...

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

Урок 10: Графика в JavaScript

Урок 11: Мультипликация

Урок 12: Оптимизация изображений