🎬 迪士尼12原则在UI中的应用
Frank Thomas和Ollie Johnston在1981年的《The Illusion of Life》中提出了动画的12个基本原则。这些原则直接适用于UI动效设计：
挤压与拉伸
按钮按下时微微缩小（scale:0.95），松开回弹——暗示物理重量
预备动作
元素移动前先微小反向移动——如抽屉打开前先关1px
演出布局
一个时刻一个焦点——不要同时动画多个元素
顺序动画
列表项依次出现（stagger 50ms）而非同时——有"流"的感觉
跟随与重叠
元素停止后微微超出再回弹（overshoot）——模拟惯性
慢入慢出
使用缓动函数——元素不会突然开始或停止
弧线运动
元素沿弧线而非直线移动——更自然
次要动作
主要动画+微小的辅助动画——如按钮hover时图标微微旋转
时间节奏
100-300ms是UI动画甜点——太快看不到，太慢觉得卡
夸张
适当放大动效幅度——比现实更"弹"更有活力
扎实绘图
动画不影响元素的实际位置和大小——视觉变化≠布局变化
吸引力
动效让界面有趣——微交互是"让人微笑"的细节
📈 缓动函数的数学
缓动函数定义了动画的速度曲线。CSS使用贝塞尔曲线 cubic-bezier(x1, y1, x2, y2)：
⏱️ 动画时长指南
微交互 100-200ms
按钮hover、开关切换、颜色变化。人眼刚好能感知的最短有效时长。
过渡动画 200-400ms
面板展开/收起、页面切换、列表排序。最常用的时长范围。
复杂动画 400-700ms
模态框出现、页面转场、大幅位移动画。需要足够时间让用户理解变化。
强调动画 700ms+
空状态插画、加载动画、教学引导。需要有叙事性——但这不是"慢"的借口。
🔄 加载状态：骨架屏 vs Spinner
加载状态是用户最常遇到的"等待"——如何让等待不那么痛苦？
Spinner
不提供进度信息
Pulse
有呼吸感但无结构
骨架屏
预览内容结构
研究证据：Facebook的骨架屏A/B测试（2015）显示骨架屏比spinner感知加载时间短30%。原理：骨架屏给用户"即将看到什么"的预期→降低不确定性→减少焦虑。但Branjeni et al.(2019)发现，如果骨架屏与实际内容差异太大（"欺骗感"），反而增加不满。
🎮 贝塞尔曲线调节器
cubic-bezier(0.25, 0.10, 0.25, 1.00)