carousels-sliders

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Carousel & Slider Animation Principles

轮播图与滑块动画设计原则

Apply Disney's 12 principles to carousels and sliders for smooth, intuitive navigation.

将迪士尼的12条动画原则应用于轮播图和滑块，实现流畅、直观的导航体验。

Principles Applied to Carousels

轮播图适配的动画原则

1. Squash & Stretch

1. 挤压与拉伸（Squash & Stretch）

Slides can slightly compress in scroll direction during fast swipes. Expands perception of speed and momentum.

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

2. Anticipation

2. 预备动作（Anticipation）

Before slide change, current slide can shift 5-10px in direction of navigation. Button can depress before triggering.

切换幻灯片前，当前幻灯片可向导航方向偏移5-10像素；按钮可在触发前先呈现按下状态。

3. Staging

3. 舞台呈现（Staging）

Current/active slide should be prominently displayed: larger, centered, more opaque. Adjacent slides can be dimmed or scaled down.

当前/活跃幻灯片应突出显示：尺寸更大、居中、透明度更高。相邻幻灯片可调暗或缩小比例。

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画（Straight Ahead & Pose to Pose）

Use pose-to-pose: define exact positions for each slide. Snap points should be clear and predictable.

采用关键帧动画：定义每张幻灯片的精确位置。吸附点需清晰可预测。

5. Follow Through & Overlapping Action

5. 跟随动作与重叠动作（Follow Through & Overlapping Action）

After snap, slide can overshoot slightly and settle back. Content within slide (text, buttons) lags behind container movement.

完成吸附后，幻灯片可轻微超出目标位置再回正。幻灯片内的内容（文本、按钮）需滞后于容器移动。

6. Ease In & Ease Out

6. 缓入缓出（Ease In & Ease Out）

Swipe release:

ease-out

(momentum slowdown). Button navigation:

ease-in-out

cubic-bezier(0.25, 0.1, 0.25, 1)

for smooth slides.

滑动释放时使用

ease-out

（动量减速）；按钮导航使用

ease-in-out

。使用

cubic-bezier(0.25, 0.1, 0.25, 1)

实现平滑的幻灯片过渡。

7. Arcs

7. 弧线运动（Arcs）

3D carousels should rotate slides along curved paths. Coverflow effects follow arc naturally. Even flat carousels can have subtle Y movement.

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

8. Secondary Action

8. 次要动作（Secondary Action）

While slide moves (primary), pagination updates (secondary), adjacent slides scale/fade (tertiary), progress bar moves (quaternary).

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

9. Timing

9. 时间节奏（Timing）

Slide transition: 300-500ms
Swipe momentum: 200-400ms
Pagination dot: 150ms
Autoplay interval: 4000-6000ms
Pause on hover: immediate
Adjacent slide scale: 250ms

幻灯片过渡：300-500毫秒
滑动动量：200-400毫秒
分页点动画：150毫秒
自动播放间隔：4000-6000毫秒
悬停暂停：立即生效
相邻幻灯片缩放：250毫秒

10. Exaggeration

10. 夸张表现（Exaggeration）

Hero carousels can use more dramatic transitions. Product carousels should be smoother, less distracting. Scale to context.

主打轮播图可使用更具戏剧性的过渡效果；产品轮播图则应更平滑，避免分散注意力。需根据场景调整效果幅度。

11. Solid Drawing

11. 扎实造型（Solid Drawing）

Maintain consistent slide dimensions. Gaps should stay uniform. Aspect ratios must be preserved during any transforms.

保持幻灯片尺寸一致，间距均匀。在任何变换过程中，必须保留原始宽高比。

12. Appeal

12. 吸引力（Appeal）

Smooth carousels feel premium. Janky sliders feel cheap. Touch response should feel native. Investment here pays dividends.

流畅的轮播图能提升质感，卡顿的滑块则显得廉价。触摸响应需贴近原生体验，在此处投入精力能获得良好回报。

CSS Implementation

CSS 实现方案

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;
}

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;
}

Key Properties

核心属性

```
transform
```
: translateX, scale
```
opacity
```
: inactive slides
```
scroll-snap-type
```
: native snapping
```
scroll-behavior
```
: smooth scrolling
```
transition
```
: slide movements

```
transform
```
: translateX、scale
```
opacity
```
: 非活跃幻灯片透明度
```
scroll-snap-type
```
: 原生吸附功能
```
scroll-behavior
```
: 平滑滚动
```
transition
```
: 幻灯片运动过渡