Адаптировать старые программы к новым машинам обычно означает заставить новые машины работать по-старому. (Алан.Дж.Перлис)

JavaScript — Анимация

Главное меню » Язык программирования Javascript » Javascript — Учебное пособие » JavaScript — Анимация

(1 оценок, среднее: 5,00 из 5)

Загрузка...

19.11.2017

Вы можете использовать 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>