Учебники

JavaScript — Анимация

Январь 22, 2019

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

  • Фейерверк
  • Эффект затухания
  • Roll-in или Roll-out
  • Page-In или Page-Out
  • Движения объекта

Возможно, вас заинтересует существующая библиотека анимаций на основе JavaScript: Script.Aculo.us .

Этот учебник дает базовое понимание того, как использовать 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 пикселей. Вы также можете установить его в отрицательное значение, чтобы переместить его в левую сторону.

пример

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

Live Demo 

<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 (), и установить объект в исходное положение.

пример

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

Live Demo 

<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 вновь появится на экране.

51
Share: