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

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



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok