어떻게 생성할까요: JavaScript HTML 애니메이션
JavaScript를 사용하여 애니메이션을 생성하는 방법을 배우십시오.
기본 웹 페이지
JavaScript를 사용하여 HTML 애니메이션을 생성하는 방법을 보여주기 위해, 간단한 웹 페이지를 사용할 수 있습니다.
실례
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>
요소 스타일 설정
애니메이션을 가능하게 하기 위해, 애니메이션 요소는 '부모 컨테이너'에 대한 애니메이션 처리를 해야 합니다.
컨테이너 요소는 사용해야 합니다 style="position: relative" 생성하십시오.
애니메이션 요소는 사용해야 합니다 style="position: absolute" 생성하십시오.
실례
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
애니메이션 코드
JavaScript 애니메이션은 요소 스타일을 점진적으로 변경하여 프로그래밍으로 구현됩니다.
이 변화는 타이머 호출로 인해 발생합니다. 타이머 간격이 작을 때, 애니메이션은 연속적으로 보입니다.
기본 코드는 다음과 같습니다:
실례
var id = setInterval(frame, 5);
function frame() {
if (/* 완료 여부 테스트 */) {
clearInterval(id);
} else {
/* 변경된 요소 스타일 코드 */
}
}
JavaScript를 사용하여 애니메이션을 생성하십시오
실례
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
