如果学习过《一步一步学习使用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 | 落地弹跳 | 庆祝、完成状态 |