useSpriteAnimation()은 Facebook이 React Hooks를 사용하는 방식과 같습니다.

Facebook에 애니메이션 이미지를 게시하면 Sprite Animation으로 표시됩니다. React Hooks를 사용해 볼 수도 있습니다.

이미지는 다음과 같이 보일 수 있습니다.



애니메이션을 만들기 위해 사용자 지정 React HookuseBackgroundShift()을 작성할 수 있습니다.

function useBackgroundShift(size, xacross, yacross, xymax) {
  const [shift, setShift] = useState({ dx: 0, dy: 0 });

  useEffect(() => {
    let intervalID;

    if (size.width !== null && size.height !== null) {
      intervalID = setInterval(() => {
        setShift(({ dx, dy }) => {
          if (dx + dy * yacross + 1 >= xymax) {
            dx = 0;
            dy = 0;
          } else if (++dx >= xacross) {
            dx = 0;
            if (++dy >= yacross) {
              dy = 0;
            }
          }
          return { dx, dy };
        });
      }, 132);
    }

    return () => intervalID && clearInterval(intervalID);
  }, [size.width, size.height, xacross, yacross, xymax]);

  if (size.width === null || size.height === null) return {};

  return {
    backgroundPosition: `-${(shift.dx * size.width) / xacross}px -${
      (shift.dy * size.height) / yacross
    }px`,
    backgroundRepeat: "no-repeat"
  };
}

또한 작동 방식을 확인하기 위해 프레임 1에서 프레임 N으로 애니메이션하는 기능을 추가했습니다. 실험용으로만 해본거라 아직 완벽하지는 않습니다. 일부는 현재 하드 코딩된 숫자일 수 있지만 이것이 스프라이트 애니메이션을 수행하기 위한 사용자 지정 React Hooks의 기본 아이디어입니다.

데모: https://codesandbox.io/s/beautiful-leaf-o9hew?file=/src/App.js