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

JavaScript – Анимация

3 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
19 ноября 2017
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>

 

JavaScript - Анимация

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 81

Если статья понравилась, то поделитесь ей в социальных сетях:

Читайте также

    Добавить комментарий

    Войти с помощью: 

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Сообщить об опечатке

    Текст, который будет отправлен нашим редакторам:

    Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

    badge
    Обратный звонок 1
    Отправить
    galka

    Спасибо! Ваша заявка принята

    close
    galka

    Спасибо! Ваша заявка принята

    close