开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第35天，点击查看活动详情

贝塞尔曲线

定时函数是基于贝塞尔曲线来定义的，在上篇我们也提过，我们可以根据调整两头而生成各种定时函数。以下是五种常见的定时函数，它们都对应固定的贝塞尔曲线参数。

选择定时函数

定时函数虽然千变万化，可自定义贝塞尔曲线生成定时函数。如果从大的方面来说，可分为三种函数：

• 线性：颜色变化和淡出、淡入效果
• 减速：用户发起的变化。例如像用户点击按钮或划过元素的时候，可以使用ease-out或类似减速曲线。给用户一种及时的响应。
• 加速：系统发起的。当内容加载或操作完成、或超时、报错等信息需要提醒的时候，可以使用ease-in或类似加速曲线。这样可以让用户慢慢感知到。

自定义

如下图所示：在坐标系的原点和坐标(1,1)的位置，都存在一个控制点和一条短线（控制柄），我们按住控制点的位置，就可以随意拖动，来控制曲线的弯曲程度。最终，就可以通过cubic-bezier函数来定义，它接收4个参数，分别是两个控制点的x、y位置坐标。

所以，可以通过函数来表达以下曲线：

cubic-bezier(0.45,0.05,0.55,0.95)

阶跃

除了贝塞尔曲线，还存在另一种定时函数：steps()函数。如下图所示：

和贝塞尔曲线不同的是，从起始状态到终点状态，阶跃函数没有那么流畅，它类似于台阶，跳跃性比较强。

阶跃函数需要两个参数：

• 阶跃次数
• start/end 表示每次变化发生在阶跃的开始还是结束，默认end

其实，用阶跃函数来表示定时函数的情况不多，基本都用的是贝塞尔曲线来实现。