成帧器运动检测无限滚动视野中的图像

Question

如果有人能给我一些关于这个问题的建议，我已经花了很长时间了。

有一个例子这里

您可能需要刷新应用程序才能看到动画运行。使用下图所示的刷新按钮：

我使用 framer-motion 为一系列 div 制作动画。您会看到红色 div 在视图中无限滚动。

动画图像下方（代码中的第 178 行）是一个渲染按钮的组件，动画中的每个 giv 都有一个按钮。它传递了最初设置为 0 的 activeIndex。这将一些 css 样式应用于组件中的该按钮。

但是，当动画运行时，我看不到如何在图像进入视图时使用 setIndex 更新索引。

如何在 div 进入动画时获取其索引或 id，并使用它来更新索引以更新“点”组件。

我希望这是清楚的。感谢您的任何想法，我已经浑身湿透了，还不知道该怎么做。

Answer 1

我想我能够实现你想要的行为：

https://codesandbox.io/p/sandbox/kind-leavitt-5nf4fy

根据容器被拖动的程度来设置活动基本上是一个疯狂的逻辑：

  useMotionValueEvent(dragX, "change", (latest) => {
    const index = parseInt((1100 + latest) / 350);
    const invertedIndex = Math.abs(6 - index);
    setImgIndex(invertedIndex);
  });

  useEffect(() => {
    setImgIndex(INITIAL_INDEX);
    let controls = animate(dragX, [0, -1100, 1100, 0], {
      ease: "linear",
      duration: 20,
      repeat: Infinity,
      repeatType: "loop",
      repeatDelay: 0,
    });

    return controls?.stop;
  }, []);

但我真的不推荐它，对于你想要的行为，使用旋转木马会好得多，你可以在google中搜索一些react carousel的例子。