<자바스크립트 기초> 15. 애니메이션 다루기

 * 트랜지션

 - CSS의 트랜지션을 자바스크립트에서 좀 더 세밀하게 다뤄보자.

 - 먼저 HTML과 CSS를 이용하여 공모양의 ball클래스를 만들었다고 가정하자.

 - 이를 왼쪽 위에 붙여두기위해 앱솔루트 포지션을 주었고, 웹 문서에서 클릭을 하는 곳에 공이 따라오도록 하는 스크립트를 작성할 것이다.

const ballElem = document.querySelector('.ball');

window.addEventListener('click', function (e) {
	ballElem.style.transform = 'translate('+(e.clientX-15)+'px, ' + (e.clientY-15)+ 'px)';
})

ballElem.addEventListener('transitionend', function() {
	ballElem.classList.add('end');
})

  : ballElem이라는 변수에 ball클래스를 담아두었다. 

  앞서 봣었지만 리스터 함수에서 첫번째 변수는 이벤트객체를 의미한다. .clientX는 이벤트 때의 X좌표를, .clientY는 이벤트 때의 Y좌표를 의미한다. 즉 마우스가 클릭된 곳의 좌표값들을 의미한다. 이를 이용하여 transform객체에 traslate를 넣어 이동시켰다. -15는 공이 클릭한 정 가운데에 가도록 공의 절반사이즈를 빼준 것이다.

 

 : 마지막으로 transitionend를 이용하여 트랜지션이 끝났을 때, end클래스를 추가하여 색이나 모양을 변경시키도록 하였다.

 

* 애니메이션

 - 이번에는 CSS의 애니메이션을 스크립트로 세밀하게 다뤄볼 것이다.

 - 위와 같이 공을 다루는 애니메이션을 만들것이다. 이번에는 공을 클릭하면 특정 애니메이션이 보이도록 하자.

const ballElem = document.querySelector('.ball');


ballElem.addEventListener('click', function () {
	ballElem.style.animation = 'ball-ani 1s 4 alternate forwards'
})

ballElem.addEventListener('animationend', function() {
	ballElem.classList.add('end');
})

  : 먼저 ballElem에 공이 들어간 클래스를 담아주었다.

  이벤트 리스너를 이용하여 클릭시에 애니메이션 객체에 미리 만들어둔 애니메이션을 1초단위로 4번 반복하여 왔다갔다하도록 하였다. 그리고 forwards를 이용하여 종료된 시점에 머무를 수 있도록 하였다. 사실 짝수 번 반복되기 때문에 큰 상관은 없다. 그러나 홀수번일 경우 처음위치와 다른 위치일 수 있다. 이 때 forwards는 그 위치에 머무르게 해준다.

 

  이벤트리스너에 animationend를 이용하여 애니메이션이 끝날때의 이벤트를 만들 수 있다.

 

 

 

 

---

 

 

참고

 

 

이 글은 인프런에서 관련 강의를 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

 

인터랙티브 웹 개발

인터랙티브 웹 개발 제대로 시작하기 - 인프런