www.warayg.narod.ru - Web - кодинг: JavaScript - Самоучитель по JavaScript

Web - кодинг: JavaScript:

Самоучитель по JavaScript
Урок 28. Анимация

Автор: и Эндри Грауни
Перевод © Татьяна

красным цветом даны примечания переводчика
Концепция Скрипт Эффект Разбор скрипта Задание

Концепция

Здесь с помощью JavaScript создается анимационная картинка. Для анимации особенно важно, чтобы все изображения были заранее загружены в память компьютера. Помните, как это делается? Через команды new Image() и img.src, стоящие вне функции.

Если не позаботиться об этом заранее, то пользователю придется ждать, пока каждая картинка будет загружаться с сервера. Какая же это анимация!

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image (77,76)
img1.src = "pic1.gif"
img2 = new Image (77,76)
img2.src = "pic2.gif"
img3 = new Image (77,76)
img3.src = "pic3.gif"
function startshow()
{
   for (i=1; i<21; i=i+1)
{document.mypic.src=eval("img"+num+".src")
    for(x=1; x<800; x=x+1)
{}
    num=num+1
    if(num==4)
    {num=1}
   }
   document.mypic.src=img1.src
   }
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="pic1.gif" NAME="mypic" BORDER=0>
<p>

<A HREF="JavaScript:startshow()">
   Показать анимацию</a>

</CENTER>
</BODY>
</HTML>

Эффект

Показать анимацию

(В Експлорере скрипт не работает.)

Разбор скрипта

Обратите внимание еще раз, что рисунки, как и переменная num, вынесены за рамки функции:

<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image (77,76)
img1.src = "pic1.gif"
img2 = new Image (77,76)
img2.src = "pic2.gif"
img3 = new Image (77,76)
img3.src = "pic3.gif"

И сама функция:

startshow() содержит кое-что новое, вложенные циклы (nested loops)! Видите, внутри первого цикла for находится второй (слово for повторяется дважды.) Второй цикл замедляет смену картинок, чтобы пользователь смог их разглядеть.
Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 800 после появления каждой картинки. На это уходят доли секунды.
Внешний цикл заставляет программу повторяться 21 раз. Видите, это обозначено в функции: for (i=1; i<21; i=i+1). Так как анимация состоит из трех картинок, она будет повторена 7 раз: 7 X 3 = 21.
Когда цикл закончится, картинка снова вернется к pic1.gif.
Вот команда, которая помещает первое изображение на страницу:
<IMG SRC="pic1.gif" NAME="mypic"BORDER=0>
И наконец ссылка, которая запускает анимацию:
<A HREF="JavaScript:startshow()">Display animation</a>

Снова команда HREF указывает на JavaScript:функция(), чтобы все переменные были доступны.

Ваше задание

Перепишите программу. Пусть первым будет pic1.gif, как в сегодняшнем примере, но вставьте его в форму. Включите в нее текстовое поле, куда пользователь мог бы ввести слово slow (медленно), medium (умеренно) или fast (быстро), выбирая скорость смены картинок. Пусть medium стоит по умолчанию. 800 будет быстро. 1600 будет умеренно. 2400 будет медленно. Запускать анимацию должна текстовая ссылка «Показать анимацию».

Вперед, на Урок 29