코딩애니메이션 기초 강의를 듣고 있다. 오랜만에 다시 코딩을 하니 나름 재미도 있고, 예전에 했던 것들이 새록새록 생각나 복습하는 느낌도 든다. 기본적인 것들이지만, 기록하지 않으면 또 잊어버릴 거 같아 정리해둔다.
이번에 한 것은 박스가 우측으로 이동하는데, 클릭하면 멈추고, 다시 클릭하면 이동하는 애니메이션이다.
우선 html, css 파일을 준비하고
// html
<!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>
<link rel="stylesheet" href="style.css" />
</head>
<div id="box"></div> // 움직일 박스
<body>
</body>
</html>
// css
body {
padding: 0;
margin: 0;
}
#box {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
}스크립트 태그를 작성한다. 우선 변수는 네가지
let box = document.getElementById("box"); // 박스를 id 값으로 선택하고
let xPos = 0; // x 좌표 값으로 사용할 숫자 변수를 만들고
let isSel = false; // 버튼 클릭시 온오프로 사용할 불린 변수를 만들고
let myAnimation = window.requestAnimationFrame(onAnimate);
// 애니메이션을 담은 변수를 만든다. 여기서 requestAnimationFrame 은 1초에 60frame 씩 동작하게 하는 윈도우 객체의 내장함수다. onAnimate 는 만들어줘야할 함수우선 onAnimate 함수를 정의해준다. xPos 변수가 1씩 증가하고, 그 값이 box 의 left 값으로 계속 적용되어 좌표가 변경된다. 그리고 에니베이션 함수를 넣어주고
function onAnimate() {
xPos += 1;
box.style.left = xPos + "px";
myAnimation = window.requestAnimationFrame(onAnimate);
}클릭에 따라 동작하고 멈추고를 해주려면, 우선 이벤트 리스너를 연결하고 onClick 함수를 만들어준다. isSel 값으로 분기 처리를 해주고, 이때 cancelAnimationFrame 을 사용해서 애니메이션 동작을 멈출 수 있다.
box.addEventListener("click", onClick);
function onClick(e) {
if (isSel == false) {
isSel = true;
cancelAnimationFrame(myAnimation);
} else {
isSel = false;
myAnimation = window.requestAnimationFrame(onAnimate);
}
}전체 코드는 아래와 같다.
<!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>
<link rel="stylesheet" href="style.css" />
</head>
<div id="box"></div>
<body>
<script>
let box = document.getElementById("box");
let xPos = 0;
let isSel = false;
let myAnimation = window.requestAnimationFrame(onAnimate);
box.addEventListener("click", onClick);
function onClick(e) {
if (isSel == false) {
isSel = true;
cancelAnimationFrame(myAnimation);
} else {
isSel = false;
myAnimation = window.requestAnimationFrame(onAnimate);
}
}
function onAnimate() {
xPos += 1;
box.style.left = xPos + "px";
myAnimation = window.requestAnimationFrame(onAnimate);
}
</script>
</body>
</html>애니메이션 부르럽게 주는 방법 팁, 요즘은 라이브러리를 활용하면 되는데, 예전에는 아래처럼 쓰기도 했음
box.style.left = box.offsetLeft + (xPos - box.offsetLeft) * 0.1 + "px";
Today I Learned