JavaScript - DOM 애니메이션

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 JavaScript DOM 애니메이션의 세계로 흥미로운 여정을 떠납니다. 여러분의 친구邻里 컴퓨터 과학 교사로서, 이 fascineting 주제를 안내해드리는 것을 기쁜 마음으로 생각합니다. 믿으세요, 이 수업이 끝나면 여러분은 웹 페이지를 움직이게 만들 수 있을 것입니다!

JavaScript - DOM Animation

JavaScript로 DOM 요소 애니메이션

애니메이션의 구체적인 내용에 들어가기 전에, DOM에 대해 간단히 돌아보겠습니다. DOM은 Document Object Model의 약자로, HTML 문서에 대한 프로그래밍 인터페이스입니다. 문서의 구조를 트리 형태로 나타내어, JavaScript를 사용하여 웹 페이지의 내용과 구조를 조작할 수 있습니다.

이제 DOM 요소를 애니메이션하는 것에 대해 이야기하겠습니다. 시간이 지남에 따라 그들의 속성을 변경하여 움직임이나 변환의 Illusion을 만드는 것입니다. 이는 코드로 만드는 플립북 애니메이션과 같습니다!

간단한 예제를 시작해보겠습니다:

<div id="myBox" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
position += 1;
box.style.left = position + 'px';
}

setInterval(moveBox, 10);
</script>

이 예제에서 우리는 빨간색 박스를 화면을 가로질러 이동시키고 있습니다. 이를 구분해보겠습니다:

우리는 초기 스타일을 가진 <div> 요소를 만듭니다.
document.getElementById('myBox')를 사용하여 우리의 박스에 대한 참조를 얻습니다.
moveBox() 함수를 정의하여 position을 증가시키고 박스의 left 스타일 속성을 업데이트합니다.
setInterval()를 사용하여 매 10밀리초마다 moveBox()를 호출하여 부드러운 애니메이션을 만듭니다.

setInterval() 메서드를 사용한 DOM 요소 애니메이션

setInterval() 메서드는 JavaScript에서 애니메이션을 만드는 한 방법입니다. 이 메서드는 지정된 간격으로 반복적으로 함수를 호출합니다. 더 복잡한 예제를 보겠습니다:

<div id="bouncer" style="width: 50px; height: 50px; background-color: blue; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
x += dx;
y += dy;

if (x > window.innerWidth - 50 || x < 0) dx = -dx;
if (y > window.innerHeight - 50 || y < 0) dy = -dy;

bouncer.style.left = x + 'px';
bouncer.style.top = y + 'px';
}

setInterval(animate, 10);
</script>

이 스크립트는 튕김 효과를 만듭니다:

우리는 초기 위치(x, y)와 속도(dx, dy)를 설정합니다.
animate() 함수에서 우리는 위치를 속도에 따라 업데이트합니다.
우리는 볼이 창의 가장자리에 부딪히면 방향을 반전시킵니다.
우리는 볼의 위치를 화면에 업데이트합니다.
setInterval()는 매 10ms마다 animate()를 호출하여 부드러운 움직임을 만듭니다.

requestAnimationFrame() 메서드를 사용한 DOM 요소 애니메이션

setInterval()는 잘 작동하지만, 최신 브라우저는 더 효율적인 방법을 제공합니다: requestAnimationFrame(). 이 메서드는 브라우저에게 애니메이션을 수행하고 싶다고 알리고, 다음 그리기 전에 지정된 함수를 호출하도록 요청합니다.

우리는 튕김 볼을 requestAnimationFrame()를 사용하여 다시 작성해보겠습니다:

<div id="bouncer" style="width: 50px; height: 50px; background-color: green; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
x += dx;
y += dy;

if (x > window.innerWidth - 50 || x < 0) dx = -dx;
if (y > window.innerHeight - 50 || y < 0) dy = -dy;

bouncer.style.left = x + 'px';
bouncer.style.top = y + 'px';

requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
</script>

이 예제에서 주요 차이는 setInterval() 대신 requestAnimationFrame(animate)를 animate() 함수의 끝에서 호출하는 것입니다. 이로 인해 브라우저가 각 그리기 전에 animate()를 호출하여 루프를 만듭니다.

CSS 속성을 변경하여 DOM 요소 애니메이션

지금까지 우리는 JavaScript를 사용하여 CSS 속성을 직접 변경했습니다. 그러나 최신 웹 개발에서는 CSS 트랜지션과 애니메이션을 더 부드러운 성능을 위해 많이 사용합니다. JavaScript를 사용하여 CSS 애니메이션을 트리거하는 방법을 보겠습니다:

<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
transition: all 0.5s ease;
}
</style>

<div id="myBox" class="box"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
position += 50;
box.style.transform = `translateX(${position}px)`;

if (position < 200) {
requestAnimationFrame(moveBox);
}
}

box.addEventListener('click', function() {
position = 0;
requestAnimationFrame(moveBox);
});
</script>

이 예제에서:

우리는 CSS 클래스에 트랜지션 속성을 정의합니다.
JavaScript 함수는 transform 속성을 변경합니다.
우리는 requestAnimationFrame()를 사용하여 부드러운 애니메이션을 만듭니다.
박스를 클릭할 때 애니메이션이 시작됩니다.

이 방법은 브라우저가 CSS 트랜지션을 최적화할 수 있어 보다 부드러운 애니메이션을 제공합니다.

다음은 우리가 논의한 방법을 요약한 표입니다:

방법	장점	단점
`setInterval()`	이해하기 쉽고 구현하기 쉬움	덜 효율적일 수 있고, 끊김 현상을 유발할 수 있음
`requestAnimationFrame()`	더 효율적이고, 브라우저의 새로고침률과 동기화됨	구현이 약간 복잡함
CSS 트랜지션	매우 부드럽고, 하드웨어 가속 가능	애니메이션 단계에 대한 제어가 제한적

기억하세요, 애니메이션은 사용자 경험을 크게 향상시킬 수 있지만, 절제 있게 사용해야 합니다. 너무 많은 애니메이션은 사용자를 방해하거나 심지어 운동 질환을 유발할 수 있습니다.

이것으로 JavaScript DOM 애니메이션에 대한 우리의 여정이 끝납니다! 이 수업을 즐기셨기를 바랍니다. 계속 연습하고, 계속 애니메이션을 만들고, 가장 중요한 것은 코드에 대한 즐거움을 유지하세요!

Credits: Image by storyset

이전 튜토리얼:

JavaScript - CSS를 변경하다

다음 튜토리얼:

JavaScript - DOM 탐색