Index
이번 장에서는 애니메이션과 이벤트를 연결하는 방법을 배워보겠습니다. 우선 이번에 사용할 HTML 코드를 아래와 같이 준비해봤습니다. 이제 귀여운 냥이 한 마리가 화면에 나타날 것입니다. 아직은 아무런 동작도 하지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.cat{
width:98px;
height:136px;
background-image: url("images/cat_idle.png");
background-size: contain;
font-size:1px; /* 요소의 텍스트를 숨기기 위한 코드입니다. */
color: transparent; /* 요소의 텍스트를 숨기기 위한 코드입니다. */
}
/* catWalk 클래스가 추가될 경우 이미지를 바꿉니다. */
.cat.catWalk{
background-image: url("images/cat_walk.gif");
}
/* catAni 애니메이션을 정의합니다. */
@keyframes catAnimation{
from{
transform: translate(0, 0);
}
to{
transform: translate(300px, 0);
}
}
/* catAni 클래스를 가진 경우 catAnimation 애니메이션을 실행합니다. */
.catAni{
animation: catAnimation 1s 2 alternate forwards;
}
</style>
</head>
<body>
<div class="cat">냥이</div>
</body>
</html>
이제 스크립트를 추가해 봅시다. 냥이를 클릭하면 catAni 클래스가 붙어서 catAnimation 애니메이션이 작동할 겁니다. 이렇게 클래스에 애니메이션을 정의하고 addEventListener를 통해 이벤트를 등록하는 것이 가능합니다.
<script>
const cat = document.querySelector(".cat");
cat.addEventListener('click', () => {
cat.classList.add("catAni");
});
</script>
addEventListener에는 animationstart라는 이벤트 유형이 존재합니다. animationstart은 타겟 요소에 등록된 애니메이션이 시작될 때를 감지합니다.
<script>
const cat = document.querySelector(".cat");
cat.addEventListener('click', () => {
cat.classList.add("catAni");
});
cat.addEventListener('animationstart', () => {
cat.classList.add("catWalk");
});
</script>
위와 코드를 살펴봅시다. 애니메이션이 시작될 때 cat 요소에 catWalk라는 클래스를 추가합니다. catWalk 클래스를 통해 기존의 'cat_idle.png' 파일 위에 'cat_walk.gif' 파일 덮어 씌워지면서 냥이가 걸어가는 이미지로 바뀌게 됩니다. 이제 냥이를 클릭하면 이동하는 동시에 걷는 동작을 보여줄 겁니다.
addEventListener에는 animationend라는 이벤트 유형도 존재합니다. 이름에서 알 수 있듯 animationend는 타겟 요소에 등록된 애니메이션이 끝날 때를 감지합니다.
<script>
const cat = document.querySelector(".cat");
cat.addEventListener('click', () => {
cat.classList.add("catAni");
});
cat.addEventListener('animationstart', () => {
cat.classList.add("catWalk");
});
cat.addEventListener('animationend', () => {
cat.classList.remove("catAni", "catWalk");
});
</script>
위의 코드에서는 animationend를 통해 애니메이션이 끝나면 'catAni' 와 'catWalk' 클래스를 요소에서 제거합니다. 이렇게 되면 냥이가 되돌아온 후에 다시 정지한 이미지로 바뀌게 되고, 애니메이션도 제거되기 때문에 다시 냥이를 클릭했을 때 애니메이션을 또 재생 시킬 수 있게 됩니다. 이렇게 클릭하면 발을 구르며 잠시 오른쪽을 다녀오는 냥이를 만들어 보았습니다.