一步一步学习使用FireMonkey动画（5）动画图解11种动画插值类型

雷杰人力资源 · 发表于 2025-8-24 12:33:00

如果学习过《一步一步学习使用FireMonkey动画》系列的前几课，可以看到不止一次的使用了动画的Interpolation属性指定插值。

插值（Interpolation），在数学和计算机图形学中，是一种在两个已知值之间估算中间值的方法。简单来说，就是给定一个起点 A 和一个终点 B，插值能计算出从 A 到 B 的平滑过渡中的所有“中间点”。

一个生活中的例子：
假设你想从房间的左边（位置 X=0）走到右边（位置 X=100）。

起点 A: X = 0
终点 B: X = 100
时间： 10 秒

如果你不是瞬间移动过去的，那么在第 1 秒、第 2 秒... 第 9 秒时，你会在某个中间位置。计算这些中间位置的过程就是插值。最简单的插值是线性插值，即匀速运动：

第 1 秒：X = 10
第 2 秒：X = 20
...
第 5 秒：X = 50
第 10 秒：X = 100

这是让动画效果丰富多彩的关键。

FireMonkey 提供了多种插值函数，它们决定了数值变化的“缓动”效果（Easing）。

Linear（线性）：最简单的插值，匀速变化。
计算公式：Value = Start + (End - Start) * (CurrentTime / Duration)
Quadratic（二次方）：缓慢开始，然后加速（Ease In）；或快速开始，然后减速（Ease Out）。
Cubic（三次方）、Quartic（四次方）、Quintic（五次方）：与二次方类似，但效果更强烈。
Sinusoidal（正弦曲线）：创建一个类似正弦波的平滑加速和减速。
Exponential（指数）：以指数方式变化，产生非常强烈的加速或减速效果。
Elastic（弹性）：在终点附近会有“回弹”效果，像一根橡皮筋。
Bounce（弹跳）：在终点处像球落地一样弹跳几下。
Back（回拉）：在开始运动前会先稍微向后（反向）运动一点。

这些类型通常都有 In, Out, InOut 三种模式，分别控制效果应用于动画的开始、结束还是整个过程。这也是为动画的AnimationType属性指定的三种值的作用。

动画图解11种线性插值

说实话很难通过语言来介绍这种插值的效果，只有通过动画才能加深印象，这里使用了《Delphi GUI Programming with FireMonkey》中的一个Playground示例程序，来一步一步的演示每一种插值类型。

1. Linear（线性插值）

描述：最简单、最基础的插值类型。数值在设定的持续时间内以恒定速率从起始值变化到结束值。它产生一种机械、均匀的动画效果，缺乏自然感。
数学曲线：一条直的斜线。
适用场景：需要稳定、可预测移动的场合，如进度条填充、简单的滑块移动、数值的匀速计数等。不适合需要表现真实物理感的效果。

2. Quadratic（二次插值）

描述：基于二次方函数 (t²) 的插值。它提供了明显的加速或减速效果，比线性动画看起来更自然。
In 模式：缓慢开始，然后加速到终点。
Out 模式：快速开始，然后减速到终点。
InOut 模式：结合两者，缓慢开始，中间加速，最后减速。
数学曲线：抛物线。
适用场景：非常通用，适用于大多数 UI 元素的入场和退场动画。例如，按钮点击、菜单滑入滑出、卡片弹出等。

3. Cubic（三次插值）

描述：基于三次方函数 (t³) 的插值。其加速/减速的效果比 Quadratic 更强烈、更平滑。变化在开始和结束时更加细微，中间部分变化更快。
数学曲线：比二次更陡峭的“S”形曲线。
适用场景：当你希望动画比 Quadratic 更有“力度”和“流畅感”时。是许多现代 UI 设计中默认的缓动效果之一。

4. Quartic（四次插值）

描述：基于四次方函数 (t⁴) 的插值。其效果比 Cubic 更进一步，起始和结束时的停顿感更明显，中间的加速过程非常迅猛。
数学曲线：非常陡峭的“S”形曲线。
适用场景：需要表现极强动力或快速爆发力的动画，但使用相对较少，因为可能显得过于突兀。

5. Quintic（五次插值）

描述：基于五次方函数 (t⁵) 的插值。这是“幂函数”插值家族（Quadratic, Cubic, Quartic, Quintic）中最强力的一种。它在开始和结束时几乎完全静止，中间有极其短暂的剧烈变化。
数学曲线：最陡峭的“S”形曲线。
适用场景：创造戏剧性的、能量积聚后瞬间释放的效果。在日常 UI 交互中很少使用。

6. Sinusoidal（正弦插值）

描述：基于正弦函数 (sin) 的插值。它提供了一种非常平滑、柔和的加速和减速效果，没有幂函数那种强烈的冲击感。
数学曲线：正弦波的四分之一周期，平滑的曲线。
适用场景：适合需要优雅、平滑过渡的场景，如淡入淡出、柔和的光效变化、缓慢的页面切换。

7. Exponential（指数插值）

描述：基于指数函数 (2^(10(t-1))) 的插值。它创造出一种非常急剧的加速或减速效果，仿佛变化是瞬间发生或结束的。
数学曲线：陡峭的、类似爆炸形的曲线。
适用场景：模拟爆炸、能量脉冲、闪电等瞬间高能效果。或者用于需要极度强调的动画，吸引用户全部注意力。

8. Circular（圆形插值）

描述：基于圆形函数 (sqrt(1-t²)) 的插值。它产生一种独特的慢入快出或快入慢出效果，其运动轨迹类似于四分之一圆弧。
In 模式：慢入快出，像从弧线顶端滑落。
Out 模式：快入慢出，像沿着弧线向上滚动到停止。
数学曲线：圆形弧线。
适用场景：创造一种有趣、俏皮的动画风格，常见于一些游戏 UI 或希望展现轻松活泼氛围的应用中。

9. Elastic（弹性插值）

描述：模拟弹簧振荡效果的插值。动画值会超过结束值（Overshoot），然后来回振荡几次，最终稳定在结束值。可以调整振荡的幅度和次数。
数学曲线：衰减的正弦波。
适用场景：为UI元素添加活力和弹性反馈。非常适合按钮、弹窗、通知等交互元素，让界面感觉更生动、响应更自然。

10. Back（回拉插值）

描述：在动画开始向目标移动之前，会先向相反方向（回拉）稍微移动一点，然后再冲向目标。同样，在结束时也可能有轻微的过冲。
数学曲线：一条先反向再正向的曲线。
适用场景：模拟蓄力动作，比如拉弓射箭、准备起跳。让动画更有张力，提示用户一个动作即将发生。

11. Bounce（弹跳插值）

描述：模拟小球落地弹跳效果的插值。动画值到达结束点时不会立即停止，而是像球一样弹跳几次，幅度逐渐衰减，最终停止。
数学曲线：一系列衰减的抛物线。
适用场景：表现欢快、有趣的完成状态。非常适合庆祝性提示、游戏得分、任务完成等场景，能给用户带来积极的反馈和愉悦感。

总结与选择建议

插值类型 (InterpolationType)	核心特点	适用场景
Linear	匀速、机械	进度条、数值变化
Quadratic	自然加速/减速	通用UI交互（首选）
Cubic	更强烈的加速/减速	流畅的页面过渡
Quartic/Quintic	极其强烈的加速/减速	戏剧化、能量爆发效果
Sinusoidal	非常平滑、柔和	淡入淡出、柔和变化
Exponential	急剧、瞬间变化	爆炸、脉冲、强提醒
Circular	圆弧运动	俏皮、有趣的动画
Elastic	弹簧振荡、过冲	有弹性的UI反馈
Back	先回拉再前进	蓄力动作、提示性动画
Bounce	落地弹跳	庆祝、完成状态

来源：https://www.cnblogs.com/lincats/p/19055376

一步一步学习使用FireMonkey动画（5） 动画图解11种动画插值类型