动画

作用价值

• 视觉引导：通过运动路径引导用户视线（如表单错误提示）
• 状态过渡：平滑衔接界面变化（如页面路由切换）
• 交互反馈：即时响应操作（按钮点击涟漪效果）
• 品牌表达：通过个性动画传递品牌特质（如加载动效）

应用场景

1. 微交互
   • 按钮悬停缩放 (hover:scale-105)
   • 表单验证错误抖动 (animate-shake)
2. 数据可视化
   • 图表数据更新过渡
   • 进度条填充动画
3. 导航过渡
   • 页面切换的滑动/淡入效果
   • 面包屑导航的位置指示
4. 内容呈现
   • 卡片展开/折叠动画
   • 图片懒加载渐现

设计原则

1. 适度性
   • 持续时间 200-500ms
   • 避免超过 1000ms 的长动画
2. 一致性
   • 相同操作使用统一动画模式
   • 保持缓动函数一致 (ease-in-out)
3. 可访问性
   • 支持 @media (prefers-reduced-motion)
   • 提供动画开关选项
4. 性能优先
   • 优先使用 CSS 变换
   • 避免连续重布局属性修改

实现注意

• 硬件加速：使用 transform 和 opacity 属性
• 层级管理：注意 z-index 在动画期间的变化
• 内存优化：及时清理未使用的动画实例
• 降级方案：老旧设备自动减少动画复杂度

实践

• 动画工具库