ES6-애니메이션

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

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

이 장에서는 JavaScript를 사용하여 애니메이션을 만드는 방법을 살펴 봅니다.

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

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

  • setTimeout(함수, 기간)-이 함수는 지금부터 기간 밀리 초 후에 함수를 호출합니다.

  • setInterval(함수, 기간)-이 함수는 매 기간 밀리 초마다 함수를 호출합니다.

  • 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를 초기화합니다.

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

  • 우리는 전화하고 있습니다 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() 함수는 imgObj의 위치를 ​​설정하기 위해 setTimeout () 함수를 호출합니다.

  • 새로운 기능을 추가했습니다 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>