Практикум по программированию на JavaScript

Анимация

Показывать лекцию целиком

Концепция

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

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

Сценарий

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
 var num=1
 img1 = new Image (150,150)
 img1.src = "pic1.gif"
 img2 = new Image (150,150)
 img2.src = "pic2.gif"
 img3 = new Image (150,150)
 img3.src = "pic3.gif"  
  function startshow()
  {
   for (i=0; i<21; i=i+1)
{document.mypic.src=eval("img"+num+".src")
    for(x=1; x<8000; 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 alt="">
<p>

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

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

Результат работы сценария

На странице выводится изображение pic1.gif и текстовая ссылка " Показать анимацию", при нажатии на которую начинается последовательная смена изображений (анимация).

(Сценарий может не работать в браузере MSIE.)

Разбор сценария

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

<SCRIPT type="text/javascript">
    var num=1
    img1 = new Image (150,150)
    img1.src = "pic1.gif"
    img2 = new Image (150,150)
    img2.src = "pic2.gif"
    img3 = new Image (150,150)
    img3.src = "pic3.gif"

Теперь функция:

function startshow()
 {
  for (i=0; i<21; i=i+1)
{document.mypic.src=eval("img"+num+".src")
    for(x=1; x<8000; x=x+1)
    {}
    num=num+1
    if(num==4)
     {num=1}
    }
  document.mypic.src=img1.src
    } 
</SCRIPT>

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

Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 8000 после появления каждой картинки. На это уходят доли секунды.

Внешний цикл заставляет программу повторяться в цикле 21 раз. Видите это в функции: в первом операторе цикла for (i=0; i<21; i=i+1). Так как анимация состоит из трех картинок, она будет повторена 7 раз: 7 X 3 = 21.

Когда цикл закончится, картинка снова вернется к pic1.gif.

Вот команда, которая помещает первое изображение на страницу:

<IMG SRC="pic1.gif" NAME="mypic" BORDER=0 alt="">

Обратите внимание, что имя задано как "mypic". Если посмотреть на иерархию операторов в сценарии, то оно находится между document и src.

И наконец ссылка, которая запускает анимацию:

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

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

Задание

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

Возможное решение

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

Еще обратите особое внимание на параметр sp (speed, скорость) внутри функции startshow(). Он позволяет передавать в функцию данные, которые вводит пользователь.

И последнее — метод toUpperCase(). С его помощью все варианты написания "slow", "Slow", "sLOW" преобразуются в "SLOW". Хороший прием, не правда ли?

Вот сценарий:

<html>
<head>
<SCRIPT type="text/javascript">
    num=1
    img1 = new Image ()
    img1.src = "pic1.gif"
    img2 = new Image ()
    img2.src = "pic2.gif"
    img3 = new Image ()
    img3.src = "pic3.gif"  
    function startshow(sp)
    {
       howfast=1600
       if (sp.toUpperCase() == "SLOW")
         {howfast=2400}
       if(sp.toUpperCase() == "FAST")
         {howfast=800}
       alert(howfast)
       for (i=0; i<21; i=i+1)
          {document.mypic.src=eval("img"+num+".src")
           for(x=1; x<howfast; x=x+1)
             {}
           num=num+1
           if(num==4)
              {num=1}
           }
           document.mypic.src=img1.src
    }
</script>
</head>
<body>
<center>
<form name="myform">
<img src="pic1.gif" name="mypic" border=0>
<p>
Задайте скорость анимации: (fast, medium, slow) <input type="text" value="medium" name="speed">
<p>
<a href="JavaScript:startshow(document.myform.speed.value)">Показать анимацию</a> 
</form>
</center>
</body>
</html>
Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^