각 컴포넌트 별로 svg의 css animation keyframe의 내용만 다르기 때문에, Horizontal2(triggerK) 컴포넌트 하나를 중심으로 설명을 진행한다. 먼저 triggerK에 해당하는 keypress 또는 touch가 발생하면, triggerK가 true가 되면서 Horizontal2의 trigger prop도 true가 된다. trigger가 true가 되었을 때 useAudio custom hook을 이용하여 특정 mp3파일을 재생시킨다. 이 프로젝트에서는 크로스 브라우징을 쉽고 빠르게 대응하기 위해 howler라는 라이브러리로 Audio API를 대신했다.
function HorizontalLine2({ trigger, dispatch, theme }) {
const [, playAudio] = useAudio(SongFourSecond); // 소리를 재생하는 custom hook
...
useEffect(() => {
if (trigger) {
playAudio(); // trigger가 일어나면 음악이 재생된다.
...
dispatch({ type: 'toggle', key: 'triggerK' }); // trigger를 다시 false로 바꾼다.
}
}, [trigger]);
// useAudio.js
import { useCallback, useEffect, useState } from 'react';
import { Howl } from 'howler';
function useAudio(audioFile) {
const [audioElement, setAudioElement] = useState(null);
useEffect(() => {
// safari 크로스브라우징 이슈가 있어 최대한 많은 기기가 지원되는 옵션을 사용했다.
const newAudioElement = new Howl({
src: [audioFile], html5: true, mute: false, usingWebAudio: false, webAudio: false,
});
setAudioElement(newAudioElement);
}, [audioFile]);
const playAudio = useCallback(() => {
if (!audioElement) return;
if (audioElement.playing()) {
audioElement.stop();
}
audioElement.play();
}, [audioElement]);
return [audioElement, playAudio];
}
export default useAudio;
특정 키를 연속으로 눌러 playAudio 함수를 여러 번 실행할 경우 howler.js의 stop, play method를 이용하여 노래를 끊고 다시 재생시킬 수 있다.
음악 재생 기능을 구현했으니 이제 css 애니메이션을 구현할 차례이다. triggerK에 해당하는 애니메이션 trigger 되었을 때 애니메이션을 재생하는 핵심 로직은 className을 변경하는 데 있다. css animation 속성을 class가 .active 일 때만 적용되도록 하면 HTML tag의 추가나 삭제 없이 class만 변경하여 애니메이션을 재생시킬 수 있다.
이제 코드를 통해 추가 설명을 하겠다.
// HorizontalLine2.js
let cancelAnimation = { listener: null }; // setTimeout/clearTimeout 정보를 저장하기 위해 객체
const flickerRect = useRef(null);
...
useEffect(() => {
flickerRect.current = document.querySelector('.HorizontalLine2'); // class를 조작할 node
}, []);
useEffect(() => {
if (trigger) {
playAudio(); // 음악 재생
startAnimation(flickerRect.current, cancelAnimation); // 애니메이션 재생
dispatch({ type: 'toggle', key: 'triggerK' });
}
}, [trigger]);
// functions.js
/**
* 하나의 dom 요소에 active class 를 넣은 후 제거.
*/
export function startAnimation(element, cancelAnimation, time) {
clearTimeout(cancelAnimation.listener);
element.classList.remove('active');
const triggerReflow = element.offsetWidth; // 강제로 reflow를 시켜 classList remove/add 로직이 무시되는 현상을 막는다.
element.classList.add('active'); // 애니메이션 재생
cancelAnimation.listener = setTimeout(() => {
element.classList.remove('active'); // 애니메이션 삭제
}, time || 350);
}
// styles.js
const strokeAnimation = css`
@keyframes stroke {
0% { transform: scaleX(0); transform-origin: left 0; }
50% { transform: scaleX(1); transform-origin: left 0; }
51% { transform: scaleX(1); transform-origin: right 0; }
100% { transform: scaleX(0); transform-origin: right 0; }
}
// .active class일 때 animation을 재생
&.HorizontalLine2.active rect {
animation-name: stroke;
animation-duration: 0.35s;
animation-iteration-count: 1;
}
`;
컴포넌트가 trigger 되면 startAnimation 함수를 실행하여 class에 'active'를 추가한다. setTimeout을 이용하여 애니메이션 실행 후 일정 'time'이 지나면 'active' class를 remove한다. 해당 키를 연속으로 누를 경우 'cancelAnimation' 객체에 저장해 둔 setTimeout listener를 clearTimeout을 이용하여 clear함으로써 버그를 방지한다.
