目标:用静态图像创造流畅运动的错觉 方式:创建中间帧,使其在两个关键帧之间实现平滑过渡。

动画维度设计参数Android 术语iOS 术语Web 术语
时间长度持续时间durationduration / spring durationduration / animation-duration / transition-duration
开始节奏延迟startDelaydelay / beginTimedelay / animation-delay / transition-delay
时间映射缓动曲线Interpolator / TimeInterpolatorcurve / timingFunction / CAMediaTimingFunctioneasing / animation-timing-function
贝塞尔曲线曲线控制点PathInterpolator(x1,y1,x2,y2)CAMediaTimingFunction(controlPoints...)cubic-bezier(x1,y1,x2,y2)
分段节奏关键帧占比Keyframe.fractionkeyTimes / timingFunctionsoffset / 0% / 50% / 100%
弹性强度弹性、回弹dampingRatiobounce / dampingRatio无原生统一 spring 参数;常由 JS 动画库提供
弹簧硬度刚度stiffnessstiffness通常由 JS 动画库模拟
阻尼衰减、摩擦感dampingRatiodamping / dampingRatio通常由 JS 动画库模拟
惯性初速度startVelocityinitialVelocity / initialSpringVelocity通常由 JS 动画库模拟
质量物理质量部分 physics 动画模型有;Android SpringForce 常暴露 stiffness/dampingRatiomass通常由 JS 动画库模拟
离散跳变步进可自定义 Interpolator较少作为系统级 Tween 主参数steps(n, position)
变换基准旋转/缩放中心pivotX / pivotYanchorPointtransform-origin
运动连续性中断后是否保持速度SpringAnimation 更适合Spring 模型天然更适合JS spring 库更适合