수동 애니메이션(Manual Animation)
수동 애니메이션은 말 그대로 애니메이션 과정이 자동화되지 않은 방식입니다. DOM 객체 속성과 자바스크립트 함수를 조합하면 간단한 애니메이션을 직접 구현할 수 있으며, 이때 활용되는 핵심 DOM 메서드는 다음과 같습니다.
- 자바스크립트의 getElementById() 함수로 DOM 객체를 가져온 뒤, 전역 변수 imgObj에 할당합니다.
- 초기화 함수 init()을 정의하여 imgObj의 position 속성과 left 속성을 설정합니다.
- 윈도우(window)가 로드되는 시점에 초기화 함수를 호출합니다.
- 마지막으로 moveRight() 함수를 호출해 left 값을 10픽셀씩 증가시킵니다. 값을 음수로 설정하면 이미지를 왼쪽으로 이동시킬 수도 있습니다.
예제
아래 코드를 실행하면 자바스크립트로 애니메이션을 구현하는 과정을 직접 확인할 수 있습니다.
<html>
<head>
<title>자바스크립트 애니메이션</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>아래 버튼을 클릭하면 이미지가 오른쪽으로 이동합니다</p>
<input type = "button" value = "클릭" onclick = "moveRight();" />
</form>
</body>
</html>자동 애니메이션(Automated Animation)
위의 과정은 자바스크립트의 setTimeout() 함수를 활용하면 자동화할 수 있습니다.
여기에는 몇 가지 메서드가 더 추가되었습니다. 새롭게 등장한 요소들을 살펴보겠습니다.
- moveRight() 함수가 setTimeout() 함수를 호출하여 imgObj의 위치를 일정한 간격으로 계속 갱신합니다.
- 새로운 함수 stop()을 추가하여, setTimeout()으로 설정된 타이머를 해제하고 객체를 초기 위치로 되돌립니다.
예제
아래 코드를 실행하면 자바스크립트로 자동 애니메이션을 구현하는 방법을 확인할 수 있습니다.
<html>
<head>
<title>자바스크립트 애니메이션</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); // 20밀리초 후 moveRight 재호출
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>아래 버튼을 클릭하여 애니메이션을 제어해 보세요</p>
<input type = "button" value = "시작" onclick = "moveRight();" />
<input type = "button" value = "정지" onclick = "stop();" />
</form>
</body>
</html>정리
수동 애니메이션은 사용자가 버튼을 클릭할 때마다 한 번씩만 움직이는 반면, 자동 애니메이션은 setTimeout()을 통해 일정 시간 간격으로 함수를 반복 호출하여 연속적인 움직임을 만들어냅니다. 여기에 clearTimeout()을 함께 사용하면 언제든 애니메이션을 멈추고 초기 상태로 되돌릴 수 있어, 보다 완성도 높은 인터랙티브 요소를 구현할 수 있습니다.