state-changes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

State Change Animations

状态变化动画

Apply Disney's 12 principles when elements transform without leaving.

当元素变换且不退出视图时可应用迪士尼12项动画原则。

Principle Application

原则应用

Squash & Stretch: Elements compress before expanding. A toggle switch squashes 5% before sliding.

Anticipation: Wind up before the change. Slight reverse movement (2-3px) before expanding.

Staging: Keep transformations centered on user focus. Don't let state changes distract from the interaction point.

Straight Ahead vs Pose-to-Pose: Define exact states. Button has rest, hover, active, disabled - each precisely designed.

Follow Through & Overlapping: Parts transform at different rates. Icon rotates before label fades in.

Slow In/Slow Out: Use ease-in-out for bidirectional changes:

cubic-bezier(0.4, 0, 0.2, 1)

Arcs: Rotating elements follow natural arcs. Chevrons rotate on their center point, not linearly.

Secondary Action: Pair the primary change with supporting motion. Toggle sliding + color shift + icon swap.

Timing:

Micro-states: 100-150ms (checkbox tick, radio fill)
Standard states: 150-250ms (toggles, accordions)
Complex states: 250-400ms (multi-part transformations)

Exaggeration: Overshoot slightly on state changes. Toggle goes 2px past, then settles.

Solid Drawing: Maintain element integrity during transformation. No distortion that breaks visual consistency.

Appeal: State changes should feel satisfying. Users clicked with intent - reward that intent.

挤压与拉伸：元素展开前先收缩。开关切换前会先挤压5%再滑动。

预备动作：状态变化前先有蓄力动作。展开前先小幅反向移动（2-3px）。

画面布局：保持变换围绕用户焦点中心展开。不要让状态变化分散用户对交互点的注意力。

逐帧动画 vs 关键帧动画：明确定义每个精确状态。按钮有常规、悬浮、激活、禁用四种状态，每一种都经过精准设计。

动作延续与重叠：不同部分的变换速率不同。图标先旋转，随后标签淡入。

缓入缓出：双向变化使用ease-in-out曲线：

cubic-bezier(0.4, 0, 0.2, 1)

。

弧形运动：旋转元素遵循自然弧形路径。V形图标围绕中心点旋转，而非线性移动。

次要动作：为主状态变化搭配辅助动效。开关滑动+颜色变化+图标切换同时进行。

时长参考：

微状态：100-150ms（复选框打勾、单选框填充）
标准状态：150-250ms（开关切换、手风琴展开）
复杂状态：250-400ms（多部件联动变换）

夸张表现：状态变化时小幅超出目标位置。开关先超出目标位置2px，再回落至最终位置。

立体绘制：变换过程中保持元素完整性。不要出现破坏视觉一致性的变形。

吸引力：状态变化应该让人感到愉悦。用户是有意点击的，要给这份意图正向反馈。

Timing Recommendations

时长建议

State Change	Duration	Easing	Notes
Checkbox	150ms	ease-out	Tick draws in
Toggle Switch	200ms	ease-in-out	Overshoot slightly
Radio Button	150ms	ease-out	Scale in from center
Accordion	250ms	ease-in-out	Height + rotation
Tab Switch	200ms	ease-in-out	Indicator slides
Button Active	100ms	ease-out	Scale to 0.97
Card Expand	300ms	ease-in-out	All properties together

状态变化	时长	缓动函数	备注
复选框	150ms	ease-out	对勾逐步绘制
开关	200ms	ease-in-out	小幅超出目标位置
单选框	150ms	ease-out	从中心向外缩放填充
手风琴	250ms	ease-in-out	高度变化+旋转动效
标签页切换	200ms	ease-in-out	指示器滑动
按钮激活	100ms	ease-out	缩放至0.97倍
卡片展开	300ms	ease-in-out	所有属性同步过渡

Implementation Pattern

实现示例

css

.toggle {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-knob {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
}

.toggle.active .toggle-knob {
  transform: translateX(20px);
}

css

.toggle {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-knob {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
}

.toggle.active .toggle-knob {
  transform: translateX(20px);
}

Accordion Pattern

手风琴实现示例

css

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-in-out;
}

.accordion.open .accordion-content {
  grid-template-rows: 1fr;
}

css

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-in-out;
}

.accordion.open .accordion-content {
  grid-template-rows: 1fr;
}

Key Rule

核心规则

State changes are reversible. The animation to state B should be the inverse of animation to state A. Test both directions.

状态变化是可逆的。切换到状态B的动画应该是切换到状态A动画的反向效果。两个方向的动画都要测试。