[Next로 전적검색 사이트] 홈 화면 애니메이션

 

홈 logo 애니메이션

 

처음에는 useEffect의 dependency array에 trigger값을 주어 애니메이션을 컨트롤 했는데 애니메이션 함수가 둘 이상 실행되는 문제가 발생하여 아래와 같은 로직으로 수정하였다.

 

useEffect(()=> {
	setInterval(()=> {
		const animate = () => {
			// logo animation
            
    		requestAnimationFrame(animate)
    	}
    	animate()
	}, 10000)
}, [])

 

setInterval에서 주기적으로 애니메이션 재시작을 위한 함수를 호출해주고 프레임 마다 동작은 requestAnimationFrame함수를 사용하여 지속적으로 데이터를 처리할 수 있게 구현했다.

 

그리고 토글키를 넣어서 애니메이션을 on/off할 수 있도록 구현했는데 이 기능을 구현한 이후 탭을 변경하고 다시 돌아오는 행동 등을 하였을 때 애니메이션이 제대로 진행되지 않는 문제가 발생하였다. 정확한 이유는 알 수 없으나 브라우저의 탭이 전환됬을때 데이터 값을 초기화 시켜주는 방식으로 문제를 해결하였다.

 

document.addEventListener("visibilitychange", onVisible);

const onVisible = () => {
    if (document.visibilityState === "visible") {
      animationToggle.current =
        window.sessionStorage.getItem("animationRunning") === "true";
    } else {
      window.sessionStorage.setItem(
        "animationRunning",
        String(animationToggle.current)
      );
    }
    initAnimation();
  };

코드처럼 현재 탭에서 벗어날때 필요한 데이터를 sessionStorage에 저장하고 다시 탭으로 돌아왔을 때 이전 상태값을 가져와서 데이터를 처리하니 해당 문제를 해결할 수 있었다.