Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее
Eltisbook > Java Script учебник > Мультипликация в JavaScript.

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

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

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

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

Теперь нам осталось определиться только со способом запуска мультипликации. Запустить мультипликацию можно любым из известных нам обработчиков событий (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>

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

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


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

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