Back to Details

feedback-indicators

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Feedback Indicator Animations

反馈提示动画

Apply Disney's 12 principles to action confirmation animations.
将迪士尼的12条动画原则应用于操作确认动画中。

Principle Application

原则应用

Squash & Stretch: Success checkmarks can scale with overshoot. Compress on draw, expand on complete.
Anticipation: Brief gather before feedback appears. 50ms of preparation before the confirmation.
Staging: Feedback appears at the action location. Button shows checkmark, field shows validation.
Straight Ahead vs Pose-to-Pose: Define feedback states: neutral → processing → success/error.
Follow Through & Overlapping: Icon animates, then label appears. Stagger confirmation elements.
Slow In/Slow Out: Success: ease-out (confident arrival). Error: ease-in-out (shake settles).
Arcs: Checkmarks draw in arcs, not straight lines. Error X's cross naturally.
Secondary Action: Checkmark draws + color shifts + scale bounces for rich feedback.
Timing:
  • Instant feedback: 100-200ms (form validation)
  • Success confirmation: 300-500ms (checkmark draw)
  • Error indication: 400ms (shake + message)
  • Auto-dismiss: 2000-4000ms after appearance
Exaggeration: Success deserves celebration. Overshoot scale to 1.2, bold colors, confident motion.
Solid Drawing: Feedback icons must be clear at a glance. Recognition in 100ms or less.
Appeal: Positive feedback should feel rewarding. Negative feedback firm but not punishing.
挤压与拉伸：成功对勾可通过过度缩放实现动画效果，绘制时压缩，完成时展开。
预备动作：反馈出现前添加短暂的准备阶段，在确认动画前预留50毫秒的准备时间。
场景布局：反馈在操作发生的位置出现，比如按钮上显示对勾，输入框旁显示验证状态。
逐帧动画与关键帧动画：定义反馈的不同状态：中性态 → 处理中 → 成功/错误态。
跟随动作与重叠动作：先播放图标动画，再显示文字标签，错开确认元素的动画时序。
缓入缓出：成功状态使用缓出动画（呈现自信的到位效果），错误状态使用缓入缓出动画（抖动后平稳下来）。
弧线运动：对勾沿弧线绘制，而非直线；错误叉号采用自然的交叉轨迹。
次要动作：结合对勾绘制、颜色渐变和缩放弹跳，实现丰富的反馈效果。
时序控制:
  • 即时反馈：100-200毫秒（表单验证）
  • 成功确认：300-500毫秒（对勾绘制）
  • 错误提示：400毫秒（抖动+提示信息）
  • 自动消失：出现后2000-4000毫秒
夸张表现：成功状态应带有庆祝感，将缩放比例调至1.2，使用醒目颜色和流畅的运动轨迹。
清晰造型：反馈图标必须一目了然，确保用户能在100毫秒内识别。
吸引力：正面反馈应带来愉悦感，负面反馈要明确但不具惩罚性。

Timing Recommendations

时序推荐

Feedback TypeDurationAuto-dismissEasing
Inline Validation150msNoease-out
Checkmark Draw400ms3000msease-out
Success Toast300ms4000msease-out
Error Shake400msNoease-in-out
Error Toast300ms6000msease-out
Save Indicator200ms2000msease-out
反馈类型时长自动消失缓动效果
行内验证150ms否ease-out
对勾绘制400ms3000msease-out
成功提示框300ms4000msease-out
错误抖动400ms否ease-in-out
错误提示框300ms6000msease-out
保存提示200ms2000msease-out

Implementation Patterns

实现模式

css
/* Checkmark draw */
.checkmark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: draw-check 400ms ease-out forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* Success with scale */
.success-icon {
  animation: success 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes success {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Error shake */
.error-shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Inline validation */
.field-valid {
  animation: valid-pop 200ms ease-out;
}

@keyframes valid-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
css
/* Checkmark draw */
.checkmark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: draw-check 400ms ease-out forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* Success with scale */
.success-icon {
  animation: success 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes success {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Error shake */
.error-shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Inline validation */
.field-valid {
  animation: valid-pop 200ms ease-out;
}

@keyframes valid-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

SVG Checkmark Pattern

SVG对勾示例

html
<svg class="checkmark" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#10B981"/>
  <path
    class="check-path"
    d="M7 13l3 3 7-7"
    stroke="white"
    stroke-width="2"
    fill="none"
  />
</svg>
html
<svg class="checkmark" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#10B981"/>
  <path
    class="check-path"
    d="M7 13l3 3 7-7"
    stroke="white"
    stroke-width="2"
    fill="none"
  />
</svg>

Auto-Dismiss Pattern

自动消失实现

javascript
// Show success, auto-hide
element.classList.add('success-visible');

setTimeout(() => {
  element.classList.remove('success-visible');
  element.classList.add('success-hidden');
}, 3000);
javascript
// Show success, auto-hide
element.classList.add('success-visible');

setTimeout(() => {
  element.classList.remove('success-visible');
  element.classList.add('success-hidden');
}, 3000);

Key Rules

核心规则

  1. Feedback must appear within 100ms of action
  2. Success states: celebrate briefly, don't linger
  3. Error states: persist until user acknowledges
  4. Always provide text alongside icons for accessibility
  5. prefers-reduced-motion
    : instant state, no animation
  1. 反馈必须在操作发生后100毫秒内出现
  2. 成功状态：短暂庆祝，不过度停留
  3. 错误状态：持续显示直到用户确认
  4. 始终为图标搭配文字说明，保障可访问性
  5. 若用户开启
    prefers-reduced-motion
    ：直接切换状态，不播放动画