carousels-sliders

轮播与滑块动画原则

将迪士尼的 12 条原则应用于轮播与滑块，实现流畅、直观的导航。

应用于轮播的原则

1. 挤压与拉伸

快速滑动时，幻灯片可以沿滚动方向轻微压缩，增强速度感和动量感。

2. 预备动作

切换幻灯片前，当前幻灯片可以沿导航方向移动 5-10px。按钮可以在触发操作前先下压。

3. 演出布局

当前/活动幻灯片应醒目显示：尺寸更大、居中且不透明度更高。相邻幻灯片可以调暗或缩小。

4. 直线运动与姿势到姿势

采用姿势到姿势的方式：为每张幻灯片定义精确位置。吸附点应清晰且可预测。

5. 跟随动作与重叠动作

吸附后，幻灯片可以轻微过冲，然后回到稳定位置。幻灯片中的内容（文本、按钮）应滞后于容器移动。

6. 缓入与缓出

松开滑动：使用 ease-out（动量减速）。按钮导航：使用 ease-in-out。使用 cubic-bezier(0.25, 0.1, 0.25, 1) 实现平滑切换。

7. 弧形运动

3D 轮播应沿曲线路径旋转幻灯片。Coverflow 效果自然遵循弧线。即使是平面轮播，也可以加入轻微的 Y 轴移动。

8. 次要动作

幻灯片移动时（主要动作），分页指示器更新（次要动作），相邻幻灯片缩放/淡出（第三动作），进度条移动（第四动作）。

9. 时间

• 幻灯片切换：300-500ms
• 滑动动量：200-400ms
• 分页圆点：150ms
• 自动播放间隔：4000-6000ms
• 悬停时暂停：立即
• 相邻幻灯片缩放：250ms

10. 夸张

主视觉轮播可以采用更戏剧化的切换效果。产品轮播应更平滑、不那么分散注意力。根据使用场景调整。

11. 扎实绘制

保持幻灯片尺寸一致。间距应始终均匀。任何变换都必须保留宽高比。

12. 吸引力

流畅的轮播给人以高品质的感觉。卡顿的滑块则显得廉价。触控响应应具有原生体验。投入在这方面会带来丰厚回报。

CSS 实现

.carousel-track {
  display: flex;
  transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.carousel-slide {
  flex-shrink: 0;
  transition: transform 300ms ease-out,
              opacity 300ms ease-out;
}

.carousel-slide:not(.active) {
  transform: scale(0.9);
  opacity: 0.6;
}

.pagination-dot {
  transition: transform 150ms ease-out,
              background-color 150ms ease-out;
}

.pagination-dot.active {
  transform: scale(1.3);
}

/* CSS scroll snap */
.carousel-container {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-slide {
  scroll-snap-align: center;
}

关键属性

• transform：translateX、scale
• opacity：非活动幻灯片
• scroll-snap-type：原生吸附
• scroll-behavior：平滑滚动
• transition：幻灯片移动