JavaScript-애니메이션

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

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

기존 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 개체의 여러 속성을 설정할 수도 있습니다. 개체의 상단 및 왼쪽 속성을 설정 하여 화면의 아무 곳에 나 배치 할 수 있습니다. 구문은 다음과 같습니다.

// 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 우리가 설정 한 곳 position 과 left 속성.
윈도우로드시 초기화 함수를 호출하고 있습니다.
마지막으로 우리는 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>