웹 페이지에서 애니메이션을 구현하는 방법은 CSS 트랜지션이나 requestAnimationFrame() 등 다양하지만, 가장 기본적인 방식 중 하나는 자바스크립트의 setInterval() 함수를 활용하는 것입니다. 이 함수는 일정한 시간 간격마다 지정된 코드를 반복 실행하므로, 요소의 위치나 스타일 값을 조금씩 변경하면 부드러운 움직임 효과를 만들 수 있습니다.
애니메이션의 핵심 원리
자바스크립트 애니메이션의 기본 원리는 다음과 같습니다.
- 반복 실행:
setInterval(frame, 10)처럼 짧은 간격(10밀리초)으로 함수를 계속 호출합니다. - 값의 점진적 변화: 매 호출마다 요소의 위치(
left)나 스타일(borderRadius)을 1px씩 증가시킵니다. - 종료 처리: 목표 위치에 도달하면
clearInterval()로 타이머를 해제하여 애니메이션을 멈춥니다.
예제 코드
아래 코드는 버튼을 클릭하면 보라색 사각형이 오른쪽으로 이동하면서 동시에 모서리가 둥글게 변하는 애니메이션 예제입니다.
<!DOCTYPE html>
<html>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button{
padding:10px;
font-size: 18px;
background-color: blue;
color:white;
border:none;
margin-bottom:10px;
}
.Animation {
width: 60px;
height: 60px;
position: absolute;
background-color: rgb(134, 25, 207);
}
</style>
<body>
<h1>Animation using JS example</h1>
<button onclick="startAnimation()">Start Animation</button>
<div class ="Animation"></div>
<script>
function startAnimation() {
var elem = document.querySelector(".Animation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 450) {
clearInterval(id);
} else {
pos++;
elem.style.borderRadius = pos/14 + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>코드 상세 설명
document.querySelector(".Animation"): 클래스명이Animation인 div 요소를 선택합니다.var pos = 0: 현재 위치를 저장할 변수를 0으로 초기화합니다.setInterval(frame, 10): 10밀리초마다frame함수를 실행하는 타이머를 생성하고, 그 ID를 변수id에 저장합니다.pos == 450: 위치 값이 450px에 도달하면clearInterval(id)를 호출해 애니메이션을 종료합니다.elem.style.left = pos + 'px': 요소를 오른쪽으로 이동시키고,elem.style.borderRadius = pos/14 + 'px'를 통해 이동하면서 모서리가 점점 둥글어지도록 합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
“Start Animation” 버튼을 클릭하면 사각형이 오른쪽으로 이동하며 모서리가 원형으로 변해갑니다.
마무리 및 참고 사항
이처럼 setInterval()을 사용하면 간단한 코드만으로도 요소를 움직이는 애니메이션을 쉽게 구현할 수 있습니다. 다만 더 복잡하고 성능이 중요한 애니메이션을 만들 때는 브라우저의 렌더링 주기에 맞춰 동작하는 requestAnimationFrame()을 사용하는 것이 좋습니다. 또한 CSS 애니메이션과 함께 활용하면 더욱 풍부한 사용자 경험을 제공할 수 있습니다.