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

如果学习过《一步一步学习使用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 落地弹跳 庆祝、完成状态
相关推荐
@Demi5 小时前
vsCode或Cursor 使用remote-ssh插件链接远程终端
服务器·ide·vscode·ssh
王伯爵6 小时前
Visual Studio Code (VS Code) 工作区配置文件的作用
ide·vscode·状态模式
南风里9 小时前
Android Studio下载gradle文件很慢的捷径之路
android·ide·android studio
lincats11 小时前
一步一步学习使用FireMonkey动画(4) 使用Delphi的基本动画组件类,路径和位图列表动画 弹跳小球和奔跑的小人示例
livebindings·delphi 12.3·firemonkey
后天han18 小时前
vscode中launch.json中定义的编译文件名于生成的不一致修改
ide·vscode·编辑器
lincats1 天前
一步一步学习使用FireMonkey动画(3) 使用Delphi的基本动画组件类
ide·delphi·delphi 12.3·firemonkey
在嵌入式里摸爬滚打1 天前
VScode远程连接Ubuntu报错问题分析
ide·vscode·编辑器
funfan05171 天前
IDEA基础配置优化指南(中英双版)
java·ide·intellij-idea
萧戈1 天前
如何为 Visual Studio 2019 安装 WDK
ide·visual studio