Framer Motion 无限滚动滑块/轮播

Question

framer-motion 允许您将 Drag="x" 添加到运动元素，然后您可以沿 x 轴拖动该元素。这是通过根据用户拖动的距离更改

transform: translateX(...px)

来实现的。

这可以轻松创建滑块。

有一些关于如何通过成帧器运动实现无限轮播滑块（无开始/无结束 - 最后一个项目后面又是第一个项目）的示例 - 但只有一个项目可见。

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

我需要使用framer-motion，因为滑块项目必须使用framer-motion进行动画处理，而framer-motion动画不能与Splide等其他滑块库一起使用。

Splide 等其他框架已将滑块中的原始项目左右克隆，并且当到达原始项目末尾时，translateX 坐标会重置。 演示：https://i.sstatic.net/yfV61.jpg

据我所知，只能通过

useAnimation

钩子来操纵运动元素的 translateX，该钩子在用户拖动时不起作用。

Answer 1

这是在 sveltekit 中，但你可以轻松地将其翻译成 React，重要的是原理。

// Script

const images = [
    '/images/1.jpeg',
    '/images/2.jpeg',
    '/images/3.jpeg',
    '/images/4.jpeg',
    '/images/5.jpeg'
];

let innerHeight: number;

// Svelte

<svelte:window bind:innerHeight />
<ul class='space-y-2'>
    {#each Array(2) as _} 
        {#each images as src}
            <Motion
                let:motion
                transition={{ duration: 5, ease: 'linear', repeat: Infinity }}
                initial={{ y: 0 }}
                animate={{ y: -innerHeight }}
            >
                <li use:motion>
                    <img {src} alt="image" class="rounded" />
                </li>
            </Motion>
        {/each}
    {/each}
</ul>

本质上你有两个堆栈，它们从上到下循环（你可以搞乱方向、速率等）。一旦到达终点，它就会循环回来。你有 2 个堆栈，所以一旦它到达底部，它在循环时看起来是无缝的。有任何问题请随时询问我（们）。如果你在 React 中需要它，请告诉我。希望这有帮助