JavaScript - анимация

: Категория: JavaScript; Опубликовано: 14 сентября 2018; Просмотров: 2242

javascript

Содержание:

Ручная анимация
Автоматическая анимация
Ролловер с событием мыши

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

Фейерверк
Эффект Fade
Roll-in или Roll-out
Ввод страницы или страница
Движения объектов

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

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

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

SetTimeout ( функция, продолжительность). Эта функция вызывает функцию после длительности миллисекунд.
SetInterval ( функция, длительность) - Эта функция вызывает функцию каждой длительность миллисекунд.
ClearTimeout ( setTimeout_variable ) - эта функция вызывает очистку любого таймера, установленного функциями setTimeout().

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

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

пример

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

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

пример

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

<html>
  
   <head>
      <title>JavaScript Animation</title>
     
      <script type="text/javascript">
         <!--
            var imgObj = null;
            var animate ;
           
            function init(){
               imgObj = document.getElementById('myImage1');
               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="myImage1" 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.

<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>

JavaScript - анимация

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

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

Ролловер с событием мыши

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

Поделиться в соцсетях

Подписаться на канал

ТОП-10 статей

Свежие записи