ch6 - 2. animation 이벤트

Index

1. 클릭 이벤트로 애니메이션 추가하기 2. animationstart 3. animationend

1. 클릭 이벤트로 애니메이션 추가하기

이번 장에서는 애니메이션과 이벤트를 연결하는 방법을 배워보겠습니다. 우선 이번에 사용할 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>

2. animationstart

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' 파일 덮어 씌워지면서 냥이가 걸어가는 이미지로 바뀌게 됩니다. 이제 냥이를 클릭하면 이동하는 동시에 걷는 동작을 보여줄 겁니다.

3. animationend

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' 클래스를 요소에서 제거합니다. 이렇게 되면 냥이가 되돌아온 후에 다시 정지한 이미지로 바뀌게 되고, 애니메이션도 제거되기 때문에 다시 냥이를 클릭했을 때 애니메이션을 또 재생 시킬 수 있게 됩니다. 이렇게 클릭하면 발을 구르며 잠시 오른쪽을 다녀오는 냥이를 만들어 보았습니다.