從帶有反應的 animationFrame 內部訪問狀態數組的問題

Question

我正在嘗試使用 animationFrame 更新滾動上的一些元素。 我想添加一個緩動效果，所以我希望元素通過緩動值更新它們的位置。 我認為最好的方法是將所有值存儲在一個數組中並相應地更新它們。 當每個元素被安裝時，我將它們發送到一個上下文元素，該元素將它們添加到狀態值數組中。

我的問題是我無法從動畫函數內部訪問數組。 它在動畫功能之外可用，但在內部不可用。 我假設動畫在填充數組之前開始，但是當塊數組隨 useEffect 更改但無濟於事時，我嘗試停止並重新啟動動畫。

這是問題示例的代碼和框

在沙箱中，您可以在 ScrollContainer 組件的animate()函數中看到我正在控制台記錄blocks數組，然后在該函數之后我記錄相同的數組。 當您滾動數組時，不會記錄可用塊，而只會記錄一個空數組。 但是可用塊在此功能下被正確記錄。

const animate = () => {
  const diff = yScroll - yCurrent;
  const delta = Math.abs(diff) < 0.1 ? 0 : diff * ease;
  if (delta) {
    yCurrent += delta;
    yCurrent = parseFloat(yCurrent.toFixed(2));
    animationFrame = requestAnimationFrame(animate);
  } else {
    cancelAnimation();
  }
  console.log("Animating Blocks", blocks);
};

console.log("Available Blocks", blocks);

const addBlock = block => {
  setBlocks(prev => {
    return [...prev, block];
  });
};

這是我開始動畫的方式

const startAnimation = () => {
  if (!animationFrame) {
    animationFrame = requestAnimationFrame(animate);
  }
};

useEffect(() => startAnimation(), []);

謝謝。

Answer 1

我玩過你的例子。 在我看來，問題出在 useEffect 中。 如果向其添加空依賴項，則它在第一次渲染后僅運行一次。 當塊狀態更新時會有第二次渲染，但對於 useEffect 只有第一個狀態是可見的，因為它只運行一次並且它使用帶有陳舊閉包的 startAnimation。 此版本的 startAnimation 使用具有原始狀態的第一個版本的動畫。

如果您將塊作為依賴項添加到 useEffect 中，那么您最初的問題就解決了。

  useEffect(() => {
    yScroll = window.scrollY || window.pageYOffset;
    yCurrent = yScroll;
    startAnimation();

    window.addEventListener("scroll", updateScroll);
    return () => {
      window.removeEventListener("scroll", updateScroll);
    };
  }, [blocks]);

我嘗試添加動畫，但對我來說很不穩定。 我對你的最終解決方案感興趣。 這是啞劇： https : //codesandbox.io/s/scrolling-animation-frame-array-issue-d05wz

我使用更高級的動畫庫，如 react-spring。 你可以考慮使用這樣的東西。 我認為它更容易使用。

https://codesandbox.io/s/staging-water-sykyj