跳到主要内容

缓动函数

Milease 支持的缓动函数种类如下:

EaseEnum.cs
public enum EaseFunction
{
Linear, Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic, Bounce, Bezier
}

支持的缓动类型有:

EaseEnum.cs
public enum EaseType
{
In, // 动画开始时较慢,随后变快
Out, // 动画开始时较快,随后变慢
IO // 动画开始时较慢,随后变快,最后又变慢
}

什么是缓动?

简单来说,就是控制动画效果过程中每一小部分的快慢。

为什么需要缓动?

举一个简单的例子,如果你试着匀速拉出你的抽屉,你会感到你的动作非常僵硬和机械。

我们实际上拉出抽屉的过程,是有速度动态变化的过程,例如先快速地拉出,然后慢慢减速,最后停止。

缓动就是让原本匀速的运动具有了这样自然的动感,让动画更加生动。

Linear 缓动,即线性缓动,也就是匀速移动,这是最僵硬的一种移动方式,因此建议少用。

缓动函数的数学原理

设一辆小车在时间区间 t1,t2t_1, t_2 内,从位置 (a,0)(a, 0) 移动至 (b,0)(b, 0)

其在任意时刻 tt(满足 t1tt2t_1 \leq t \leq t_2)的位置可由以下表达式描述:

x(t)=a+(ba)px(t) = a + (b - a) \cdot p

其中,pp 表示当前时刻相对于整个运动过程的进度比例,定义为:

p=tt1t2t1p = \frac{t - t_1}{t_2 - t_1}

为了实现非线性运动效果(即缓动),我们引入缓动函数 e(p)e(p)。此时,小车的运动轨迹可表示为:

x(t)=a+(ba)e(p)x(t) = a + (b - a) \cdot e(p)

缓动函数 e(p)e(p) 的定义域通常为 [0,1][0, 1],而其值域大多数情况下也限制在 [0,1][0, 1],但某些类型(如 Back 缓动)可能略有超出,用于模拟“回弹”等物理特性。

常见的缓动函数示例如下:

  • 线性缓动(Linear):

    e(p)=pe(p) = p
  • 正弦缓动(In-Sine):

    e(p)=sin(pπ2)e(p) = \sin\left(\frac{p \cdot \pi}{2}\right)

    不同的缓动函数能模拟出加速、减速、弹跳、回弹等多种自然运动效果,是动画曲线设计中的核心工具。

了解缓动函数的图形和特征

详情可参阅该网站:https://easings.net/