JavaScript 기본 애니메이션의 원리
JavaScript에서 기본 애니메이션을 구현하려면 DOM 객체의 스타일 속성과 JavaScript 함수를 함께 활용해야 합니다. 핵심 아이디어는 이미지와 같은 HTML 요소의 위치 값을 JavaScript로 동적으로 변경하여 움직임 효과를 만드는 것입니다.
구현 단계 살펴보기
아래는 JavaScript 애니메이션을 구현할 때 사용되는 주요 절차입니다.
- JavaScript 내장 함수인 getElementById()를 사용하여 DOM 객체를 가져온 뒤, 전역 변수 imgObj에 할당합니다.
- 초기화 함수 init()을 정의하여 imgObj의 position(위치)과 left(왼쪽 좌표) 속성을 설정합니다.
- 윈도우가 로드되는 시점에(window.onload) 초기화 함수가 자동으로 호출되도록 설정합니다.
- 마지막으로 moveRight() 함수를 호출하여 left 값(왼쪽 거리)을 10픽셀씩 증가시킵니다. 이 값을 음수로 설정하면 요소를 왼쪽으로 이동시킬 수 있습니다.
전체 예제 코드
다음은 위 개념을 실제로 적용한 완전한 HTML 예제입니다. 버튼을 클릭할 때마다 이미지가 오른쪽으로 10픽셀씩 이동합니다.
<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>아래 버튼을 클릭하면 이미지가 오른쪽으로 이동합니다</p>
<input type="button" value="클릭" onclick="moveRight();" />
</form>
</body>
</html>
코드 동작 방식 설명
- init() 함수: 페이지 로드 시 실행되며, id가 'myImage'인 이미지 요소를 가져와 position을 'relative'로 지정하고 left 값을 '0px'로 초기화합니다.
- moveRight() 함수: 현재 left 값에 parseInt()로 숫자만 추출한 뒤 10을 더하고 다시 'px' 단위를 붙여 저장합니다. 이 과정이 반복되면서 이미지가 점점 오른쪽으로 이동하는 애니메이션 효과가 만들어집니다.
활용 팁
버튼 클릭 대신 setInterval() 함수를 사용하면 일정한 간격으로 moveRight()를 반복 호출하여 부드러운 연속 애니메이션을 구현할 수 있습니다. 또한 left 값에 음수를 더하거나 top 속성을 조절하면 좌우상하 자유롭게 요소를 움직일 수 있어, 이 기본 원리를 확장하면 더욱 다양한 동적 UI 효과를 만들 수 있습니다.