useRafFn

在每一幀 requestAnimationFrame 上執行回調函數。

useRafFn 使用 requestAnimationFrame 在每個動畫幀執行一個回呼函式。它回傳一個帶有 pause 和 resume 控制項的物件，以及當前的活動狀態。此 hook 適合建構流暢的動畫和需要在每幀更新的視覺效果。

使用場景

建構平滑的自訂動畫或視覺效果
實作基於時間的遊戲迴圈或物理模擬
在每個渲染幀更新 canvas 繪圖或 WebGL 場景

注意事項

SSR 安全：在伺服器端渲染時為空操作。伺服器上不會呼叫 requestAnimationFrame。
效能：回呼在每個動畫幀執行（通常每秒 60 次）。確保回呼是輕量的以避免效能問題。
相關 hooks：另請參閱 useFps 用於測量幀率，以及 useInterval 用於固定間隔的定時器。

Usage

Live Editor


function Demo() {
  const [ticks, setTicks] = useState(0);
  const [lastCall, setLastCall] = useState(0);
  const update = useUpdate();

  const [loopStop, loopStart, isActive] = useRafFn((time) => {
    setTicks(ticks => ticks + 1);
    setLastCall(time);
  });

  return (
    <div>
      <div>RAF 觸發次數：{ticks} (次)</div>
      <div>最後高精度時間戳：{lastCall}</div>
      <br />
      <button
        onClick={() => {
          isActive() ? loopStop() : loopStart();
          update();
        }}
      >
        {isActive() ? "停止" : "開始"}
      </button>
    </div>
  );
};

Result

API

useRafFn

Returns

readonly [() => void, () => void, () => boolean]: 包含以下元素的元組：

停止函數。
開始函數。
函數是否在執行中。

Arguments

參數名	描述	類型	預設值
callback	回调	FrameRequestCallback (必填)	-
initiallyActive	立即执行	boolean \| undefined	-