目标:用静态图像创造流畅运动的错觉 方式:创建中间帧,使其在两个关键帧之间实现平滑过渡。
| 动画维度 | 设计参数 | Android 术语 | iOS 术语 | Web 术语 |
|---|---|---|---|---|
| 时间长度 | 持续时间 | duration | duration / spring duration | duration / animation-duration / transition-duration |
| 开始节奏 | 延迟 | startDelay | delay / beginTime | delay / animation-delay / transition-delay |
| 时间映射 | 缓动曲线 | Interpolator / TimeInterpolator | curve / timingFunction / CAMediaTimingFunction | easing / animation-timing-function |
| 贝塞尔曲线 | 曲线控制点 | PathInterpolator(x1,y1,x2,y2) | CAMediaTimingFunction(controlPoints...) | cubic-bezier(x1,y1,x2,y2) |
| 分段节奏 | 关键帧占比 | Keyframe.fraction | keyTimes / timingFunctions | offset / 0% / 50% / 100% |
| 弹性强度 | 弹性、回弹 | dampingRatio | bounce / dampingRatio | 无原生统一 spring 参数;常由 JS 动画库提供 |
| 弹簧硬度 | 刚度 | stiffness | stiffness | 通常由 JS 动画库模拟 |
| 阻尼 | 衰减、摩擦感 | dampingRatio | damping / dampingRatio | 通常由 JS 动画库模拟 |
| 惯性 | 初速度 | startVelocity | initialVelocity / initialSpringVelocity | 通常由 JS 动画库模拟 |
| 质量 | 物理质量 | 部分 physics 动画模型有;Android SpringForce 常暴露 stiffness/dampingRatio | mass | 通常由 JS 动画库模拟 |
| 离散跳变 | 步进 | 可自定义 Interpolator | 较少作为系统级 Tween 主参数 | steps(n, position) |
| 变换基准 | 旋转/缩放中心 | pivotX / pivotY | anchorPoint | transform-origin |
| 运动连续性 | 中断后是否保持速度 | SpringAnimation 更适合 | Spring 模型天然更适合 | JS spring 库更适合 |