JavaScript — Анимация

Вы можете использовать JavaScript для создания сложной анимации, но не ограничиваясь, следующие элементы:
- Фейерверк
- Эффект затемнения
- Сворачивание или разворачивание.
- Переход на страницу или выход из страницы
- Движения объектов
Вам может быть интересна существующая анимационная библиотека на основе JavaScript: Script.Aculo.us.
В этой статье представлено базовое представление о том, как использовать JavaScript для создания анимации.
JavaScript может использоваться для перемещения нескольких элементов DOM (<img />, <div> или любого другого элемента HTML) на страницах в соответствии с каким-либо шаблоном, определяемым логическим уравнением или функцией.
JavaScript предоставляет следующие две функции, которые часто используются в анимационных программах.
- setTimeout( function, duration) — эта функция вызывает function после duration миллисекунд, начиная с момента вызова.
- setInterval(function, duration) — эта функция вызывает function после каждой duration миллисекунды.
- clearTimeout(setTimeout_variable) — эта функция вызывает очистку любого таймера, установленного функциями setTimeout().
JavaScript также может устанавливать несколько атрибутов объекта DOM, включая его положение на экране. Вы можете установить атрибут top и left объекта, чтобы поместить его в любом месте на экране. Вот его синтаксис.
// Установите расстояние от левого края экрана. object.style.left = distance in pixels or points; или // Заданном расстоянии от верхнего края экрана. object.style.top = distance in pixels or points;
Ручная анимация
Итак, давайте реализуем одну простую анимацию с использованием свойств объекта DOM и функций JavaScript следующим образом. Следующий список содержит различные методы DOM.
- Мы используем функцию JavaScript getElementById() для получения объекта DOM, а затем присваиваем ему глобальную переменную imgObj.
- Мы инициализировали функциюinit() для инициализации imgObj, где мы установили ее атрибуты position и left.
- Мы вызываем функцию инициализации во время загрузки окна.
- Наконец, мы вызываем функцию moveRight(), чтобы увеличить левое расстояние на 10 пикселей. Вы также можете установить его на отрицательное значение, чтобы переместить его влево.
Пример
Попробуйте следующий пример.
<html> <head> <title>Анимация в JavaScript</title> <script type="text/javascript"> <!-- var imgObj = null; function init(){ imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight(){ imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; } window.onload =init; //--> </script> </head> <body> <form> <img id="myImage" src="/images/html.gif" /> <p>Нажмите кнопку ниже, чтобы переместить изображение вправо</p> <input type="button" value="Нажми меня" onclick="moveRight();" /> </form> </body> </html>
Автоматическая анимация
В приведенном выше примере мы увидели, как изображение перемещается вправо с каждым щелчком. Мы можем автоматизировать этот процесс, используя функцию setTimeout() в JavaScript следующим образом:
Здесь мы добавили больше методов. Итак, давайте посмотрим, что здесь нового:
- Функция moveRight() вызывает функцию setTimeout() для установки позиции imgObj.
- Мы добавили новую функцию stop(), чтобы очистить таймер, установленный функцией setTimeout(), и установить объект в его исходное положение.
Пример
Попробуйте следующий пример кода.
<html> <head> <title>Анимация в JavaScript</title> <script type="text/javascript"> <!-- var imgObj = null; var animate ; function init(){ imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight(){ imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; animate = setTimeout(moveRight,20); // вызов moveRight в 20msec } function stop(){ clearTimeout(animate); imgObj.style.left = '0px'; } window.onload =init; //--> </script> </head> <body> <form> <img id="myImage" src="/images/html.gif" /> <p>Нажмите кнопки ниже, чтобы обработать анимацию</p> <input type="button" value="Начало" onclick="moveRight();" /> <input type="button" value="Конец" onclick="stop();" /> </form> </body> </html>
Ролловер с событием мыши
Вот простой пример, показывающий опрокидывание изображения с событием мыши.
Давайте посмотрим, что мы используем в следующем примере:
- Во время загрузки этой страницы оператор «if» проверяет наличие объекта изображения. Если объект изображения недоступен, этот блок не будет выполнен.
- Конструктор Image() создает и предварительно загружает новый объект изображения с именем image1.
- Свойству src присваивается имя файла внешнего изображения, называемого /images/html.gif.
- Аналогично, мы создали объект image2 и назначаем /images/http.gif этому объекту.
- Символ # (хэш-знак) отключает ссылку, чтобы браузер не пытался перейти к URL-адресу при нажатии. Эта ссылка является изображением.
- Обработчик события OnMouseOver вызывается, когда пользователь движет мышь на ссылке, и обработчик события onMouseOut вызывается, когда мышь пользователя отходит от линии (изображение).
- Когда мышь перемещается по изображению, изображение изменяется с первого изображения на второе. Когда мышь перемещается от изображения, отображается исходное изображение.
- Когда мышь будет удалена от ссылки, на экране появится исходное изображение html.gif.
<html> <head> <title>Ролловер с событиями мыши</title> <script type="text/javascript"> <!-- if(document.images){ var image1 = new Image(); // Предварительная загрузка изображения image1.src = "/images/html.gif"; var image2 = new Image(); // Предварительная загрузка второго изображения image2.src = "/images/http.gif"; } //--> </script> </head> <body> <p>Наведите курсор на изображение, чтобы увидеть результат</p> <a href="#" onMouseOver="document.myImage.src=image2.src;" onMouseOut="document.myImage.src=image1.src;"> <img name="myImage" src="/images/html.gif" /> </a> </body> </html>