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>