钥匙要点
- thumult Hype是一种现代的Web动画工具，允许动画剂创建密钥帧（启动和停止点），并且计算机动态填充了所有内部框架。计算机生成这些帧的方式会影响观众的注意力和情感联系。
时序功能在人性化您正在动画的元素中起着至关重要的作用。他们可以帮助清晰，清晰地展示信息，直接关注，传达情感以及娱乐和参与。定时功能还可以模拟“无生命”和“动画”对象的运动。
Tumult Hype提供了一个自定义的定时功能编辑器，该编程允许操纵控制点并在曲线上添加新点以形成您自己的自定义计时功能。这些功能可以被命名并保存在炒作文档中，也可以将其设置为任何新动画的默认计时函数。-
使用定时功能的实用技巧包括让您的动画“休息”几天，以查看您回来时是否仍然喜欢它，从同龄人那里获得反馈，避免了通过用户操作触发的动画的大量宽松，因为它将触发它感到迟钝，观察自然并理解重力/物理学的数学，以告知如何撰写动画。
- 本文由tumult 赞助。感谢您支持使SitePoint成为可能的合作伙伴。
- >
>动画可以大致定义为显示连续的图像或帧，以给予平滑更改的错觉。诸如Tumult Hype之类的现代Web动画工具没有手工制作每个帧，而是让动画仪创建关键帧（通常启动和停止点），并且计算机动态填充了所有框架之间的所有框架。计算机决定生成这些帧的方式可能会影响观众的注意力和情感联系。本文探讨了一个关键的生成动画，计时功能以及如何最佳地利用动画的高级计时函数编辑器。
>
阅读之前，第一步是下载Tumult Hype。该试验持续14天。 Tumult Hype具有两种风味模式：标准和专业。为了制作自定义定时功能（并与本文一起使用！），您需要使用Hype Professional。
线性和宽松的计时函数
>假设您想在屏幕上移动一个盒子。在两秒钟的过程中，您将其向左移动300像素。在生成动画时，计算机需要及时确定盒子的位置，这是正时函数的作用。其中最基本的是线性插值，它均匀地将距离划分为框架数。因此，每秒30帧的动画将使每个步骤移动框5像素，为300px /（2s * 30fps）= 5px。这成功创建了一个动画：
是主观的，这个动画很平淡！它移动而没有任何自然的身体或体重。观众的眼睛必须赶上盒子的移动速度，然后当动画突然结束时，他们的目光可能会超越他们的目光。最常见的解决方案是将基本的加速度和减速应用于盒子。此计时功能称为“易于”：
>
这看起来更好，并且是动画的最常见选择。这是骚扰炒作和大多数其他动画工具中的默认计时函数。
>
表示正时函数的表示
更确切地说，定时函数输入时间（x）的值并输出动画属性（y）的值。召回回到中学代数，F（x）= y风格的功能是可以在2D图上表示的形式。基本的线性正时函数看起来正如人们所期望的，一行：
轻松的是一条柔和的曲线，它以较慢的速度启动和结束：
>
使用CubicBézier曲线的数学创建此计时函数。通过更改影响曲率的控制点，可以实现不同的加速度和减速：
属性值甚至可以低于最小值或最大值以上，创建预期和过时的正时函数：
>
Tumult Hype提供了更多的功能：可以将几条Bézier曲线组合在一起以形成多曲线路径。这些可用于各种效果，例如弹跳或弹性：
>专注于动画中的定时功能的一般推理
自然不像上面的线性正时函数那样机械移动。因此，定时功能诸如放松之类的功能在人性化您正在动画的元素中起着至关重要的作用。这有助于清晰，清晰地提供信息。它指导焦点。
良好的时机有助于为动画提供意义。它使毫无生气的形状变成现实。有些可以帮助传达对品牌至关重要的情感。 其他时机可以娱乐和参与。
“无生命”对象的运动更多地受到物理的控制。 “动画”对象由自己的思想和情感支配。两种样式都可以通过定时功能进行建模。
在骚扰中应用时序函数
编辑动画在骚动炒作中的时序函数很容易。 步骤零是制作动画的，因此，如果您不熟悉，请查看教程和文档。
要调整单个动画的计时函数，您可以双击“按专业”区域中的密钥帧之间的动画指示栏：>
如果选择了多个动画，则可以使用时间表接口右侧的“计时函数”弹出按钮：>
未选择动画时，默认的时间函数将显示为“正时功能”弹出按钮的标题。
在Hype Professional中，此接口允许操纵控制点并在曲线上添加新点以形成您自己的自定义定时功能。 可以命名正时功能，以便将其保存在炒作文档中。它们也可以将其设置为任何新动画的默认计时函数：
>
该编辑器类似于其他向量编辑应用程序。这是操纵控制点的备忘单：
- 单击曲线：添加新点
- 删除键：删除控制点
- >选件单击：转换为角度顶点
- 选项拖拉：拖出新的控制点
- >选项（拖动控制点）：镜像
- >命令（拖动控制点）：断开连接
-
无（只是拖动控制点）：非对称
- shift（拖动控制点时）：保持45°角
使用定时功能的实用提示
- >手工艺和选择定时功能是一种技能，经验将使人们变得更好。
>让您的动画“休息”几天而无需查看它，看看您回来时是否仍然喜欢它。或从同龄人那里获得反馈。-
循环动画通常应使用线性正时函数。基于轻松的计时功能将在循环周期的开始时创建一个停止点或跳跃。>
- >避免在用户动作触发的动画中避免（缓慢加速），因为它会感到缓慢。
>
- >过冲（背部）和期望（反向背面）可能是看起来光荣的效果，但通常这违背了帮助观众关联动作的动画的目的。此外，这些可能会浪费用户的时间，因为它们倾向于花费更长的时间。很少使用。
- >尝试使用相同的动画持续时间和不同的时序函数，以进行更多的视觉阴谋或表达不同的体重/惯性，这可能是一件好事。也就是说，除非自然模型或角色动画，否则最好不要过多地使用太多不同的计时功能。不要忘记也尝试使用惊人的动画开始时间或稍微更改持续时间。
就像视觉效果通常具有控制线的重量和调色板一样，最好为动画提出一种设计语言，包括持续时间和时序功能，以及用于选择哪种时间定时功能的基本原理。 >
观察自然并了解重力/物理学的数学，因为这可以帮助告知如何创作动画。例如，要制作弹跳对象，y值应使用弹跳正时函数。 X值应该具有线性时序函数，因为没有作用在该轴上的力。即使理解良好，有时也更容易使用物理引擎。- >
>从大自然或大师动画师那里获得灵感：
-
John Halas和Harold Whitaker的动画时机
>
Richard Williams的动画师的生存工具
-
- 结论
以上是高级时机和宽松的网络动画，thumult炒作的详细内容。更多信息请关注PHP中文网其他相关文章！
未选择动画时，默认的时间函数将显示为“正时功能”弹出按钮的标题。
在Hype Professional中，此接口允许操纵控制点并在曲线上添加新点以形成您自己的自定义定时功能。 可以命名正时功能，以便将其保存在炒作文档中。它们也可以将其设置为任何新动画的默认计时函数：
