Remotion 3D 垂直滚动条

Remotion 3D 垂直滚动条 は何をしますか？

此技能为 Remotion 提供了一个可复用的架构模式和组件，用于创建无限、多列 3D 滚动动画（常用于照片画廊、3D照片滚动墙、技术栈展示或演职员表滚动）。

工作原理

无限滚动的错觉是通过领域复制和模运算结合 CSS 3D 变换实现的：

1. 无限数学：我们将内容列表复制一份（[...items, ...items]）。根据帧率和所需的循环时长，计算一个从 0 到 1 的 progress 值。然后将列从 0% 平移到 -50%（反向则为 -50% 到 0%）。由于内容已复制，-50% 处的帧与 0% 处的帧看起来完全相同，从而在重置时形成无缝循环。
2. 3D 透视：父容器应用 perspective: 1000px、rotateX(20deg) 和 scale(1.2)。缩放至关重要，可确保倾斜后的顶部和底部边缘延伸至 2D 屏幕边界之外，防止空白背景透出。
3. 遮罩：CSS linear-gradient 叠加层以绝对定位方式放置在顶部和底部，具有较高的 zIndex，用于将内容平滑淡出至背景颜色。

如何使用此技能

当用户请求垂直滚动画廊或无限滚动字幕时：

1. 复制资源：提供或复制位于 assets/VerticalTicker.tsx 的通用组件到其项目的 components/animations 文件夹。
2. 配置：引导用户在其 Remotion <Composition /> 中导入并渲染 <VerticalTicker /> 组件。
3. 适配数据：该组件与数据无关。它接受任意图片 URL 数组或 React 节点作为列。可以为每列指定不同的 durationInSeconds 和 direction（1 或 -1）以实现视差效果。

提供的资源

• assets/VerticalTicker.tsx：实现 3D 无限滚动模式的高度可复用、强类型的 Remotion 组件。