|
После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
Опубликован: 19.10.2006 | Уровень: для всех | Доступ: свободно
Лекция 29:
Анимация
Аннотация: Основы мультипликации в JavaScript.
Ключевые слова: память, анимация, ссылка, сценарий, функция, вложенные циклы, цикла, слово, пользователь, команда, глобальные переменные, поле, slow, medium, fast, значение, программа, параметр, speed
Концепция
Здесь с помощью 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:функция(), чтобы все глобальные переменные были доступны.
Елена Сапегова
Эдуард Семынин
|
Здравствуйте. Перестали быть видны лекции и тесты практикума по программированию на JavaScript. Уже второй день из моего аккаунта виден лишь план занятий. В чем может быть проблема?
|
