Framer Motion 无限滚动滑块/轮播

Question

framer-motion 允许您将 drag="x" 添加到运动元素，然后您可以沿 x 轴拖动。这是通过根据用户拖动的距离更改transform: translateX(...px) 来实现的。

这允许轻松创建滑块。

有一些关于如何使用 framer-motion 实现无限轮播滑块（无开始/无结束 - 最后一个项目后跟第一个）的示例 - 但只有一个项目可见。

有没有办法创建一个无限轮播滑块，同时显示多个项目？

我需要使用 framer-motion，因为滑块项目必须使用 framer-motion 进行动画处理，并且 framer-motion 动画不适用于 Splide 等其他滑块库。

其他框架（如 Splide）已将项目左右克隆到滑块中的原始项目，当到达原始项目的末尾时， translateX 坐标会重置。 演示：https://imgur.com/a/rT0mQy8

据我所知，只能通过useAnimation 钩子来操作运动元素的 translateX，该钩子在用户拖动时不起作用。

Answer 1

您可以使用 whileInView 属性来协调进入/退出动画，同时在轮播中显示多个项目。有关更多信息，请参阅 Framer 文档中的 scroll-triggered animations。文档还提供了一个有用的 codesandbox 示例。

要在固定数量的项目上创建无限滚动效果，您可以跟踪显示在轮播中心的项目的“活动”索引，然后根据用户滚动的方向更新索引。 Framer 使用 popmotion 包中的 wrap 提供了一个代码框 example。您可以类似地自己计算下一个索引号：

function getNextIndex(
    currentIndex: number,
    incrementBy: number,
    arrayLength: number
  ): number {
    return (currentIndex + incrementBy + arrayLength) % arrayLength
  }