JavaScript-애니메이션

JavaScript를 사용하여 다음 요소가 포함 된 복잡한 애니메이션을 만들 수 있습니다.

  • Fireworks
  • 페이드 효과
  • 롤인 또는 롤아웃
  • 페이지 인 또는 페이지 아웃
  • 물체 움직임

기존 JavaScript 기반 애니메이션 라이브러리 인 Script.Aculo.us에 관심이있을 수 있습니다 .

이 튜토리얼은 JavaScript를 사용하여 애니메이션을 만드는 방법에 대한 기본적인 이해를 제공합니다.

JavaScript는 논리 방정식 또는 함수에 의해 결정되는 일종의 패턴에 따라 페이지에서 여러 DOM 요소 (<img />, <div> 또는 기타 HTML 요소)를 이동하는 데 사용할 수 있습니다.

JavaScript는 애니메이션 프로그램에서 자주 사용되는 다음 두 가지 기능을 제공합니다.

  • setTimeout( function, duration) −이 함수는 functionduration 지금부터 밀리 초.

  • setInterval(function, duration) −이 함수는 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 우리가 설정 한 곳 positionleft 속성.

  • 윈도우로드시 초기화 함수를 호출하고 있습니다.

  • 마지막으로 우리는 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('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가 화면에 다시 나타납니다.

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