Front-End/Javascript
[Javascript] 프레임 애니메이션
09009
2023. 4. 4. 22:44
자바스크립트에서 타이머 함수를 사용하면 특정 시간마다 코드를 실행시킬 수 있다.
• 타이머 함수
| setInvertal(함수, 시간) | 특정한 시간마다 함수 실행 |
| setTimeout(함수, 시간) | 특정한 시간 후에 함수 실행 |
| clearInterval(식별번호) | setInvertal() 함수로 설정한 타이머 제거 |
| clearTimeout(식별번호) | setTimeout() 함수로 설정한 타이머 제거 |
포털 사이트 실시간 검색어는 일정 시간마다 서버에 데이터를 요청하여 사용자에게 보여주는데, 여기에서
setInvertal() 함수가 사용된다.
프레임 애니메이션
아래 소스코드를 실행하면 이미지가 1초에 20번 전환되면서 사람이 달리는 애니메이션을 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function() {
// 변수를 선언합니다.
var count = 0;
var image = document.getElementById('image');
var frames = ['0.png','1.png','2.png','3.png','4.png','5.png',
'6.png','7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png',];
// 타이머 반복을 시작합니다.
setInvertal(function () {
image.src = frames[count % frames.length];
count = count + 1;
}, 1000 / 20);
};
</script>
</head>
<body>
<img id="image" src="1.png">
</body>
</html>
그리고 setInvertal() 함수를 사용하면 다른 이벤트(마우스 스크롤 등)로 변경하면 마우스를 드래그할 때마다 회전하는
자동차 애니메이션도 만들 수 있다. (차량 이미지를 드래그하여 원하는 모습을 보는 것)