수동 애니메이션
수동 애니메이션에서 애니메이션 프로세스는 자동화되지 않습니다. 다음은 DOM 객체 속성과 자바스크립트 기능을 이용하여 간단한 애니메이션을 구현한 것이다. 다음 목록에는 다양한 DOM 메서드가 포함되어 있습니다.
- 자바스크립트 함수 getElementById()를 사용하고 있습니다. DOM 개체를 가져온 다음 전역 변수 imgObj에 할당합니다.
- 초기화 함수 init()를 정의했습니다. imgObj 초기화 위치와 왼쪽 속성을 설정한 곳입니다.
- 창 로드 시 초기화 함수를 호출하고 있습니다.
- 마지막으로 moveRight() 를 호출합니다. 왼쪽 거리를 10픽셀 늘리는 기능입니다. 음수 값으로 설정하여 왼쪽으로 이동할 수도 있습니다.
예시
JavaScript에서 애니메이션을 구현하기 위해 다음 코드를 실행할 수 있습니다.
<html>
<head>
<title>JavaScript Animation</title>
<script>
<!--
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() 에 의해 설정된 타이머를 지우려면 기능을 사용하고 개체를 초기 위치에 설정합니다.
예시
JavaScript에서 자동화된 애니메이션을 구현하기 위해 다음 코드를 실행할 수 있습니다 -
<html>
<head>
<title>JavaScript Animation</title>
<script>
<!--
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>