本文由Tuult赞助。感谢您对合作伙伴的支持，使 SitePoint 成为可能。 动画可以粗略地定义为显示连续的图像或帧以给出平滑变化的错觉。像Tumult Hype这样的现代网络动画工具不是手工制作每一帧，而是让动画师创建关键帧（通常是开始点和停止点），然后计算机动态填充所有中间帧。计算机决定如何生成这些帧会影响观看者的注意力和情感联系。本文探讨了生成动画的关键部分，即计时函数，以及如何充分利用 Tuult Hype 的高级计时函数编辑器来制作动画。 在阅读之前，第一步是下载 Tuult Hype。试用期为 14 天，功能齐全。

Tuult Hype 有两种风格模式：标准和专业。为了制作自定义计时函数（并按照本文进行操作！），您需要使用 Hype Professional。 线性和缓动计时函数 假设您想要为一个在 WhatsApp 号码数据 屏幕上移动的盒子制作动画。在两秒钟内，您将使其向左移动 300 像素。在生成动画时，计算机需要及时确定盒子的位置，这就是定时函数的作用。其中最基本的是线性插值，它将距离除以帧数。因此，每秒 30 帧的动画将使每一步将框移动 5 像素，即。这样就成功创建了一个动画： 线性定时功能 客观来说，这部动画很平淡！它的移动没有​​任何自然的物理性或重量。观看者的眼睛必须跟上盒子移动的速度，然后当动画突然结束时可能会超出他们的视线。

最常见的解决方案是对盒子应用基本的加速和减速。这个计时函数称为Ease In Out： 缓入缓出 这看起来更好，并且是动画最常见的选择。它是 Tuult Hype 和大多数其他动画工具中的默认计时功能，这是有充分理由的。 计时函数的表示 更准确地说，计时函数输入时间值 (x) 并输出动画属性值 (y)。回想一下中学代数，f(x) = y-style 函数是一种可以在 2D 图上表示的形式。基本的线性计时函数看起来像人们所期望的那样，是一条线： 线性时序函数图 Ease In Out 是一条柔和的曲线，显示它将如何以较慢的速度开始和结束： 缓入缓出图 该计时函数是通过三次贝塞尔曲线的数学计算创建的。通过改变影响曲率的控制点，可以实现不同的加速度和减速度： 缓动图 属性值甚至可以低于最小值或高于最大值，从而创建预期和超调计时函数： 反向背图背面图 Tuult Hype 提供了更多功能：可以组合多个贝塞尔曲线以形成多曲线路径。