Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 29:

Анимация

< Лекция 28 || Лекция 29: 12 || Лекция 30 >
Аннотация: Основы мультипликации в 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:функция(), чтобы все глобальные переменные были доступны.

< Лекция 28 || Лекция 29: 12 || Лекция 30 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Эдуард Семынин
Эдуард Семынин

Здравствуйте.

Перестали быть видны лекции и тесты практикума по программированию на JavaScript. Уже второй день из моего аккаунта виден лишь план занятий. В чем может быть проблема?

 

Alex Chekalov
Alex Chekalov
Украина, Poltava
Виктория Вернер
Виктория Вернер
Украина, Днепропетровск, ДИИТ, 2012