Squash & Stretch: Buttons compress slightly on press (scaleY: 0.95). Toggle thumbs squash when hitting bounds. Notification badges bounce on update. Keep subtle—this is UI, not cartoon.
Anticipation: Hover states prepare for click. Buttons lift/grow slightly before press animation. Draggable items elevate on grab start. Loading spinners wind up before spinning.
Staging: Active form field clearly distinguished. Error states demand attention. Success confirmations are unmistakable. One interaction feedback at a time.
Straight Ahead vs Pose to Pose: Progress indicators animate continuously (straight ahead). Checkboxes snap between states (pose to pose). Combine: loading indicator ends with state-change snap.
Follow Through & Overlapping: Ripple effects expand past tap point. Toggle switches overshoot then settle. Checkmarks draw with slight delay after box fills. Menu items stagger in.
Slow In / Slow Out: Quick ease-out for responsive feel. 100ms with ease-out feels instant. Avoid linear—looks broken. Snappy entrance, gentle settling.
Arc: Toggle switches travel in slight arc. Circular action buttons expand radially. Dropdown carets rotate smoothly. Menu items can follow curved path.
Secondary Action: Icon changes color as button state changes. Badge count updates with parent notification. Helper text appears as input focuses. Shadow responds to elevation.
Timing: Immediate feedback: 50-100ms. Standard transitions: 100-200ms. Complex micro-interactions: 200-300ms. Anything longer feels sluggish for small UI.
Exaggeration: Enough to notice, not enough to distract. Error shakes: 3-5px, not 20px. Success scales: 1.05-1.1, not 1.5. Subtle but unmistakable.
Solid Drawing: Transform origin matters—buttons scale from center, tooltips from pointer. Consistent behavior across similar elements. Maintain visual integrity during animation.
Appeal: Micro-interactions add personality without overwhelming. Users should feel the interface is responsive and alive. Small delights build into overall experience quality.
挤压与拉伸（Squash & Stretch）：按钮按下时轻微压缩（scaleY: 0.95）。切换控件的滑块在触达边界时产生挤压效果。通知徽章更新时产生弹跳效果。保持效果微妙——这是UI设计，而非卡通动画。
预备动作（Anticipation）：悬停状态为点击操作做准备。按钮在按下动画前轻微抬起/放大。可拖拽元素在被抓取时升高。加载 spinner 在开始旋转前先“上弦”。
舞台呈现（Staging）：活跃表单字段需清晰区分。错误状态需吸引注意力。成功确认信息需明确无误。同一时间仅展示一个交互反馈。
逐帧动画 vs 关键帧动画（Straight Ahead vs Pose to Pose）：进度指示器持续动画（逐帧）。复选框在状态间快速切换（关键帧）。结合使用：加载指示器结束时伴随状态切换的瞬时变化。
跟随动作与重叠动作（Follow Through & Overlapping）：涟漪效果超出点击点扩散。切换开关先过冲再稳定。勾选标记在复选框填充后稍有延迟再绘制。菜单项依次出现。
缓入缓出（Slow In / Slow Out）：快速的缓出效果带来响应感。100ms的缓出动画感觉即时。避免线性动画——看起来像是失效了。干脆的入场，柔和的稳定。
弧线运动（Arc）：切换开关沿轻微弧线运动。圆形操作按钮径向展开。下拉菜单的 caret 平滑旋转。菜单项可沿曲线路径出现。
次要动作（Secondary Action）：图标随按钮状态变化改变颜色。徽章计数随父通知更新。辅助文本在输入框获得焦点时显示。阴影随元素高度变化做出响应。
时机控制（Timing）：即时反馈：50-100ms。标准过渡：100-200ms。复杂微交互：200-300ms。小型UI交互时长过长会显得迟缓。
夸张表现（Exaggeration）：效果足够明显但不分散注意力。错误抖动：3-5px，而非20px。成功缩放：1.05-1.1倍，而非1.5倍。微妙但明确无误。
实体感绘制（Solid Drawing）：变换原点很重要——按钮从中心缩放，提示框从指针位置展开。相似元素保持一致的行为。动画过程中保持视觉完整性。
吸引力（Appeal）：微交互为界面增添个性但不过度。用户应感受到界面的响应性和生命力。细微的愉悦体验会提升整体体验质量。