什么是 UI 动画？ Principle、图案和生产
UI 动画的完整指南：它是什么、数字界面的 12 条核心运动原理、何时以及如何使用它来提高参与度和可用性。
核心要点
UI 动画是特意使用运动来传达状态变化、引导用户注意力、提供反馈并在软件界面中创建物理连续性的感觉。与装饰动画不同，有效的 UI 动画服务于界面逻辑并提高感知性能。
什么是 UI 动画？
UI 动画是应用于用户界面元素（按钮、卡片、模式、导航栏、图标）以表达含义的运动。它不是装饰，而是一种沟通媒介，弥合了软件状态的二进制精度与人类感知的连续物理性之间的差距。如果做得正确，UI 动画可以减少认知摩擦，让软件感觉值得信赖且充满活力。
为什么 UI 动画对产品质量很重要
动画传达：“这个动作被接收”，“这个元素有动量”，“这个转换连接了这两个状态”。如果没有它，软件就会变得脆弱且反应迟钝，用户必须更加努力才能知道发生了什么变化。恰到好处的动作不会装饰界面；它携带界面必须用文字表述的信息。
- 即时视觉反馈通过确认操作接收来降低错误率
- 状态转换阐明了发生了什么变化以及注意力应该转移到哪里
- 基于物理的弹簧动画传达质量和工程工艺
- 入口和出口动画建立空间层次结构和导航逻辑
有效 UI 动画的核心 Principle
优秀的 UI 动画遵循一组改编自传统动画但针对软件界面和交互环境进行校准的原则。
1. 持续时间曲线上的弹簧物理
基于持续时间的动画（使用固定的 300 毫秒计时器缓入）感觉很机械，因为它们忽略了用户的输入速度。弹簧动画响应手势动量，并在物理自然稳定时到达静止状态。这就是为什么 iOS 和 Material Design 的动画模型是 spring-first 的。
2. 第一帧响应
由用户手势触发的任何动画的第一帧必须立即出现。延迟启动会破坏输入和响应之间的物理连接感觉，因此在与输入相同的帧中开始运动，而不是在计时器之后开始。
3. 空间连续性
元素应该通过逻辑空间路径移动。从按钮打开的模式应该从按钮的位置展开，而不是从屏幕中心出现。
4. 层次排序
当多个元素同时动画时，将它们从父元素到子元素错开 40-80 毫秒，以传达结构层次结构。
ExodeUI 中的 UI 动画
ExodeUI 将每个交互建模为弹簧物理问题，而不是持续计时器。您可以直观地配置刚度（响应速度）、阻尼（稳定速度）和质量（阻力有多大）。这些值将 1:1 导出到 React 挂钩和 SwiftUI 动画修改器。
生产实施片段
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function AnimatedCard({ expanded }) {
return (
<ExodeUICanvas
src="/animated_card.bexode"
inputs={{ expanded }}
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}