💻 animation control
WA API를 이용하면 CSS애니메이션과 차별화된다. 스크립트로 이요하기때문에 자유롭게 만들수있다. 이전 포스팅참고!
🖤 애니메이션 활용
✔ 버튼으로 애니메이션 컨트롤
- UI 및 기능
파란색 상자에 x축으로 200px만큼 움직이며 반복되는 애니메이션을 만들것이다.
- 버튼 3개가 있고
play를 누르면 0표시 박스(다음에서 상태표시라고하겠다)에running이라는 텍스트가 뜨면서 애니메이션이 시작되며 상자가 움직인다. pause를 누르면 상자의 움직임이 그대로 멈추고 상태표시에pause라는 텍스트가 뜬다.X2를 누르면 상자의 움직임이 현재보다 2배로 빨라진다.
- 코드
<body>
<div class="box"></div>
<div class="animation-player">
<div class="player-display">0</div>
<div class="player-buttons">
// 버튼을 눌렀을때 span태그값만 전달되자않도록 data-function값을 지정해준다.
<button class="btn" data-button-role="play">
<span class="btn-label">Play</span>
</button>
<button class="btn" data-button-role="pause">
<span class="btn-label">Pause</span>
</button>
<button class="btn" data-button-role="faster">
<span class="btn-label">X2</span>
</button>
</div>
</div>
<script>
const box = document.querySelector(".box");
// 애니메이션 상태출력 박스
const displayState = document.querySelector(".player-display");
const keyframes = [
{ transform: "translateX(0)", opacity: 0 },
{ transform: "translateX(200px)", opacity: 1 },
// { transform: "translateX(0px)", opacity: 0 },
];
const options = {
duration: 1000,
easing: "linear",
fill: "forwards",
direction: "alternate", //왔다리갔다리
iterations: Infinity, //반복
};
const animation = box.animate(keyframes, options);
console.log(animation);
const palyerBtns = document.querySelector(".player-buttons");
palyerBtns.addEventListener("click", (e) => {
const target = e.target.closest(".btn");
// console.log(target.dataset.buttonRole);
handlePlayer(target.dataset.buttonRole);
});
function handlePlayer(funName) {
// 조건에따라 애니메이션 시작/일시정지/가속 넣어주기
switch (funName) {
case "play":
console.log("play");
animation.play();
break;
case "pause":
console.log("pause");
animation.pause();
break;
case "faster":
console.log("faster");
// animation.playbackRate 애니메이션재생속도 초기값은 1이다.
if (animation.playbackRate == 1) {
animation.playbackRate = 2;
} else {
animation.playbackRate = 1;
}
console.log(animation.playbackRate);
break;
}
displayState.innerHTML = animation.playState;
}
</script>
</body>-element.closest():주어진 CSS선택자와 일치하는 요소를 찾을 때까지 자기 자신을 포함해 위쪽(부모방향)으로 문서트리를 순회한다.
-animation.playbackRate:애니메이션재생속도(초기값1)
-animation.finished:애니메이션완료(애니메이션에서의 promise객체)
-animation.ready:애니메이션이 시작될때
좋은 정보 얻어갑니다, 감사합니다.