2024. 11. 3. 18:04ㆍit/javascript
javascript events : animationstart, animationend
구현 해야 할 UI 중에 하나의 애니메이션이 끝나면,
이어서 그 다음 애니메이션이 나와야 하는 경우가 생겼습니다.
위 이미지처럼 화살표 애니메이션이 진행하다가 끝나면, 이어서 다음 애니메이션이 나와야 하는 상황.
평소처럼 animation에 딜레이를 적용하여 이어진 애니메이션 처럼 연출하거나,
라이브러리를 사용할 수도 있겠지만,
라이브러리를 사용하기에는 간단한 애니메이션이고,
딜레이로 작업하려고 생각해보니 반응형 화면 크기 별로 애니메이션 진행 시간을 다르게 적용해야 되서,
화면 크기 별로 다르게 delay 시간을 적용해야 하는 점이 비효율인 것 같아서,
애니메이션 처리 방법에 대해 인터넷에서 찾아보다가 javascript event 인 animationstart, animationend 를 알게 되었습니다.
사용 방법
사용 방법은 매우 간단합니다.
1. 요소에 애니메이션을 설정하고, (예 : css의 @ekyframes)
2. 해당 요소가 애니메이션을 시작할 타이밍 또는 끝나는 타이밍에 실행하고 싶은 작업이 있다면, 이벤트로 등록하면 됩니다. (예 : document.addEventListener('animationstart', function() {})
w3school 에 해당 예시 코드가 잘 나와 있어서 가져와봤습니다.
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_animationstart
<!DOCTYPE html>
<html>
<style>
#myDIV {
width: 100%;
height: 100px;
background: orange;
position: relative;
font-size: 18px;
padding:16px;
}
/* 1. animation 설정 */
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
<body>
<h1>HTML DOM Events</h1>
<h2>The animationstart, animationiteration and animationend Events</h2>
<div id="myDIV" onclick="myFunction()">Click me to start the animation.</div>
<script>
const div1 = document.getElementById("myDIV");
function myFunction() {
div1.style.animation = "mymove 4s 2";
}
/* 2. 이벤트 등록 */
div1.addEventListener("animationstart", myStartFunction);
div1.addEventListener("animationiteration", myRepeatFunction);
div1.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "The animation has started";
this.style.backgroundColor = "pink";
}
function myRepeatFunction() {
this.innerHTML = "The animation was played again";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "The animation has completed";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>
- animationstart : CSS애니메이션이 시작되면 실행됩니다.
- animationiteration : CSS 애니메이션의 반복이 시작될 때 마다 실행됩니다. (그래서 첫번재 애니메이션에는 발생하지 않습니다.)
- animationend : CSS 애니메이션이 완료되면 실행됩니다.(반복 횟수를 설정했다면 모든 반복 횟수가 종료되어야 animationend가 실행됩니다.)
위 코드는 애니메이션이 시작되면,
animationstart 이벤트에서 'The animation has started' 라는 메세지가 출력되게 하고,
animationiteration 이벤트에서 'The animation was played again' 이라는 메세지가 출력되게 하고,
animationend 이벤트에서 'The animation has completed' 이라는 메세지가 출력되게 합니다.
정리
결국, 애니메이션 이벤트를 사용하면,
delay 시간을 계산해서 서로 다른 애니메이션을 이어지게 보이도록 할 필요 없이,
여러 요소들에 적용된 애니메이션들이 끝나는 타이밍에 맞춰서 다른 애니메이션이나 특정 코드를 실행 할 수 있도록
해줄 수 있습니다.
혹시 크로스 브라우징에는 괜찮은가 궁금하여 검색해보니,
IE 11 이하에서도 필요하다면 동작 가능성을 고려해 봐야 할 것 같습니다.
사용해보고 느낀점은
복잡하고, 어려운 애니메이션은 라이브러리를 사용하고,
간단한 애니메이션은 css 만으로도 처리가 가능하고,
크로스 브라우징 관련하여 괜찮은 것이 맞는지 직접 확인해보지는 않았지만 확신이 없어서,
당장 사용 빈도가 높지는 않을 것 같다는 생각이 들었습니다.
하지만, 라이브러리를 사용하지 않으면서 css만으로는 불가능한
애니메이션의 시작, 끝 타이밍에 동기화하여 특정 코드를 실행할 수 있는 유일한 방법처럼 보이네요.
라이브러리를 사용하지 않고, 크로스 브라우징 이슈가 크게 없다면 종종 필요한 상황을 만나게 되었을 때, 유용하게 사용할 수 있을 것 같다는 생각이 들었습니다.
참고
https://www.w3schools.com/jsref/event_animationstart.asp
https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event
https://caniuse.com/?search=animationiteration
'it > javascript' 카테고리의 다른 글
| [javascript] window.matchMedia 함수 (0) | 2024.11.18 |
|---|---|
| onclick vs addEventListener (1) | 2024.03.18 |
| 기타 Web APIs (1) | 2024.01.14 |
| ECMAScript 2023 살펴보기 (0) | 2023.09.16 |