forms-inputs

表单与输入动画原则

将迪士尼的 12 条原则应用于表单，提供清晰的反馈和愉悦的交互体验。

应用于表单元素的原则

1. 挤压与拉伸

输入框获得焦点时可轻微变高（1-2px）。提交按钮在点击时压缩。复选框在切换时弹跳。

2. 预备动作

用户输入前，标签先向上浮动。内容输入前，焦点环先出现。让用户为输入操作做好准备。

3. 演出布局

获得焦点的输入框应在视觉上突出：边框颜色、阴影和标签位置都要有所体现。其他字段可略微变暗，以引导注意力。

4. 连贯动作与关键姿势

定义输入框的状态：默认、焦点、已填写、有效、无效、已禁用。为每种状态设置清晰的姿势，并使用平滑过渡。

5. 跟随动作与重叠动作

浮动标签到达最终位置后稍作稳定。验证图标可以轻微弹跳。字符计数器更新时可加入细微动画。

6. 缓入与缓出

焦点过渡：ease-out。验证反馈：ease-in-out。标签浮动：cubic-bezier(0.4, 0, 0.2, 1)。

7. 弧线运动

浮动标签向上移动时应略带弧线，而非直线上移，为机械式动作增添自然感。

8. 次要动作

边框高亮（主要动作）的同时，标签浮动（次要动作），辅助文本出现（第三动作）。协调各项动作，避免造成干扰。

9. 时间安排

• 焦点边框：100-150ms
• 标签浮动：150-200ms
• 验证反馈：200ms
• 错误抖动：300ms（3-4 个周期）
• 成功勾选：250ms
• 复选框切换：150ms

10. 夸张表现

错误状态可以抖动（4-6px，2-3 次）。成功状态可以短暂闪现绿色。无效输入需要清晰、醒目的反馈。

11. 扎实绘制

保持边框圆角的一致性。标签在变换时应保持文字清晰。图标应按比例缩放。

12. 吸引力

响应灵敏的表单让人感觉现代。微动画能引导用户。令人满意的反馈可减少用户放弃填写表单的情况。这项投入值得。

CSS 实现

.input-field {
  transition: border-color 150ms ease-out,
              box-shadow 150ms ease-out;
}

.floating-label {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              font-size 200ms ease-out,
              color 150ms ease-out;
}

.input-field:focus + .floating-label {
  transform: translateY(-24px) scale(0.85);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

关键属性

• transform：translateY（标签）、translateX（抖动）
• border-color：状态指示
• box-shadow：焦点环
• color：标签/文本状态
• opacity：辅助文本、图标