Учебники

ES6 — анимация

Декабрь 28, 2018

Вы можете использовать JavaScript для создания сложной анимации, имеющей, помимо прочего, следующие элементы:

  • Фейерверк
  • Исчезать эффект
  • Roll-in или Roll-out
  • Page-In или Page-Out
  • Движения объекта

В этой главе мы увидим, как использовать JavaScript для создания анимации.

JavaScript можно использовать для перемещения ряда элементов DOM (<img />, <div> или любого другого элемента HTML) по странице в соответствии с неким шаблоном, определяемым логическим уравнением или функцией.

JavaScript предоставляет следующие функции, которые часто используются в анимационных программах.

  • setTimeout (function, duration) — эта функция вызывает функцию через миллисекунды продолжительности.

  • setInterval (function, duration) — эта функция вызывает функцию через каждые миллисекунды длительности.

  • clearTimeout (setTimeout_variable) — эта функция очищает любой таймер, установленный функцией setTimeout ().

setTimeout (function, duration) — эта функция вызывает функцию через миллисекунды продолжительности.

setInterval (function, duration) — эта функция вызывает функцию через каждые миллисекунды длительности.

clearTimeout (setTimeout_variable) — эта функция очищает любой таймер, установленный функцией setTimeout ().

JavaScript также может установить ряд атрибутов объекта DOM, включая его положение на экране. Вы можете установить верхний и левый атрибуты объекта, чтобы расположить его в любом месте экрана. Ниже приводится синтаксис для того же. 

// Set distance from left edge of the screen.  
object.style.left = distance in pixels or points;    
or  
// Set distance from top edge of the screen.  
object.style.top = distance in pixels or points;

Ручная анимация

Итак, давайте реализуем одну простую анимацию, используя свойства объекта DOM и функции JavaScript следующим образом. Следующий список содержит различные методы DOM.

  • Мы используем функцию JavaScript getElementById () для получения объекта DOM, а затем присваиваем его глобальной переменной imgObj .

  • Мы определили функцию инициализации init () для инициализации imgObj, где мы установили ее положение и левые атрибуты.

  • Мы вызываем функцию инициализации во время загрузки окна.

  • Мы вызываем функцию moveRight (), чтобы увеличить левое расстояние на 10 пикселей. Вы также можете установить его в отрицательное значение, чтобы переместить его в левую сторону.

Мы используем функцию JavaScript getElementById () для получения объекта DOM, а затем присваиваем его глобальной переменной imgObj .

Мы определили функцию инициализации init () для инициализации imgObj, где мы установили ее положение и левые атрибуты.

Мы вызываем функцию инициализации во время загрузки окна.

Мы вызываем функцию moveRight (), чтобы увеличить левое расстояние на 10 пикселей. Вы также можете установить его в отрицательное значение, чтобы переместить его в левую сторону.

пример

Попробуйте следующий пример 

<html> 
   <head> 
      <title>JavaScript Animation</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>Click button below to move the image to right</p> 
         <input type = "button" value = "Click Me" onclick = "moveRight();" /> 
      </form>
   </body>
   
</html>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Автоматическая анимация

В приведенном выше примере мы видели, как изображение перемещается вправо при каждом нажатии. Мы можем автоматизировать этот процесс с помощью функции JavaScript setTimeout () следующим образом.

Здесь мы добавили больше методов. Итак, давайте посмотрим, что здесь нового.

  • Функция moveRight () вызывает функцию setTimeout () для установки позиции imgObj.

  • Мы добавили новую функцию stop (), чтобы очистить таймер, установленный функцией setTimeout (), и установить объект в исходное положение.

Функция moveRight () вызывает функцию setTimeout () для установки позиции imgObj.

Мы добавили новую функцию stop (), чтобы очистить таймер, установленный функцией setTimeout (), и установить объект в исходное положение.

пример

Попробуйте следующий пример кода. 

<html> 
   <head> 
      <title>JavaScript Animation</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); 
               // call moveRight in 20msec  
            }  
            function stop() {     
               clearTimeout(animate);    
               imgObj.style.left = '0px';   
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 

   <body> 
      <form> 
         <img id = "myImage" src = "/images/html.gif" /> 
         <p>Click the buttons below to handle animation</p> 
         <input type="button" value="Start" onclick = "moveRight();" /> 
         <input type = "button" value="Stop" onclick = "stop();" /> 
      </form>    
   </body> 
</html>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Ролловер с мышью

Вот простой пример, показывающий ролловер изображения с событием мыши.

Давайте посмотрим, что мы используем в следующем примере —

  • Во время загрузки этой страницы оператор if проверяет существование объекта изображения. Если объект изображения недоступен, этот блок не будет выполнен.

  • Конструктор Image () создает и предварительно загружает новый объект изображения с именем image1 .

  • Свойству src присваивается имя внешнего файла изображения с именем /images/html.gif .

  • Точно так же мы создали объект image2 и присвоили /images/http.gif этому объекту.

  • Знак # (хэш) отключает ссылку, поэтому браузер не пытается перейти по URL-адресу при нажатии. Эта ссылка является изображением.

  • Обработчик события onMouseOver срабатывает, когда мышь пользователя перемещается по ссылке, а обработчик события onMouseOut срабатывает, когда мышь пользователя удаляется от ссылки (изображения).

  • Когда мышь перемещается над изображением, изображение HTTP изменяется с первого изображения на второе. Когда мышь отводится от изображения, отображается исходное изображение.

  • Когда мышь отводится от ссылки, исходное изображение html.gif вновь появится на экране.

Во время загрузки этой страницы оператор if проверяет существование объекта изображения. Если объект изображения недоступен, этот блок не будет выполнен.

Конструктор Image () создает и предварительно загружает новый объект изображения с именем image1 .

Свойству src присваивается имя внешнего файла изображения с именем /images/html.gif .

Точно так же мы создали объект image2 и присвоили /images/http.gif этому объекту.

Знак # (хэш) отключает ссылку, поэтому браузер не пытается перейти по URL-адресу при нажатии. Эта ссылка является изображением.

Обработчик события onMouseOver срабатывает, когда мышь пользователя перемещается по ссылке, а обработчик события onMouseOut срабатывает, когда мышь пользователя удаляется от ссылки (изображения).

Когда мышь перемещается над изображением, изображение HTTP изменяется с первого изображения на второе. Когда мышь отводится от изображения, отображается исходное изображение.

Когда мышь отводится от ссылки, исходное изображение html.gif вновь появится на экране. 

<html> 
   <head> 
      <title>Rollover with a Mouse Events</title> 
      <script type = "text/javascript"> 
         <!--  
            if(document.images) {  
               var image1 = new Image();       
               // Preload an image image1.src = "/images/html.gif";  
                  
               var image2 = new Image();       
               // Preload second image image2.src = "/images/http.gif";  
            }  
            //
         -->
      </script> 
   </head> 

   <body> 
      <p>Move your mouse over the image to see the result</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>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

42
Share: