This article was sponsored by Tumult. Thank you for supporting the partners who make SitePoint possible.

本文由Tumult赞助 。 感谢您支持使SitePoint成为可能的合作伙伴。

Animation can roughly be defined as showing successive images or frames to give the illusion of smooth changes. Instead of producing every frame by hand, modern web animation tools like Tumult Hype let an animator create keyframes (generally start and stop points) and the computer dynamically fills in all the inbetween frames. How the computer decides to generate these frames can affect a viewer’s attention and emotional connection. This article explores a critical piece of generated animations, the Timing Function, and how to make best use of Tumult Hype’s advanced timing function editor for your animations.

动画可以大致定义为显示连续的图像或帧，以给出平滑变化的幻觉。 诸如Tumult Hype之类的现代Web动画工具无需手工制作每个帧，而是让动画师创建关键帧 (通常是起点和终点)，然后计算机动态填充所有中间帧 。 计算机如何决定生成这些帧会影响观看者的注意力和情感联系。 本文探讨了生成动画的关键部分， 定时功能 ，以及如何为您的动画充分利用Tumult Hype的高级定时功能编辑器。

Before reading, the first step is to download Tumult Hype. The trial is fully functional for 14 days. Tumult Hype has two flavor modes: Standard and Professional. For making custom timing functions (and following along with this article!), you’ll want to use Hype Professional.

阅读之前，第一步是下载Tumult Hype 。 该试用版可正常运行14天。 Tumult Hype有两种口味模式：标准和专业。 为了制作自定义计时功能(以及本文的后续内容！)，您将需要使用Hype Professional。

线性和缓动定时功能 (Linear and Easing Timing Functions)

Let’s say you want to animate a box moving across the screen. Over the course of two seconds you will have it move 300 pixels to the left. In generating an animation, the computer needs to determine the position of the box in time, and this is the role of the timing function. The most basic of these is linear interpolation, which divides evenly the distance by the number of frames. Thus a 30 frames-per-second animation would have each step move the box 5 pixels, as 300px / (2s * 30fps) = 5px. This successfully creates an animation:

假设您要为跨屏幕移动的框设置动画。 在两秒钟的过程中，您将使其向左移动300像素。 在生成动画时，计算机需要及时确定盒子的位置，这就是计时功能的作用。 其中最基本的是线性插值 ，即将距离除以帧数。 因此，每秒30帧的动画将使每个步骤将框移动5个像素，因为300px /(2s * 30fps)= 5px。 这样可以成功创建动画：

To be subjective, this animation is bland! It moves without any natural physicality or weight. A viewer’s eyes must catch up to the speed the box is moving and then will likely overshoot their gaze when the animation abruptly ends. The most common solution is to apply a basic acceleration and deceleration to the box. This timing function is called Ease In Out:

主观上，这个动画是平淡的！ 它移动时没有任何自然的身体或体重。 观看者的眼睛必须跟上盒子移动的速度，然后在动画突然结束时可能会超出他们的视线。 最常见的解决方案是对箱子应用基本的加速和减速。 此计时功能称为Ease In Out ：

This looks better, and is the most common choice for animations. It is the default timing function in Tumult Hype and most other animation tools for good reason.

这看起来更好，并且是动画的最常见选择。 有充分的理由，它是Tumult Hype和大多数其他动画工具中的默认计时功能。

计时功能的表示 (Representation of Timing Functions)

To be more precise, a timing function inputs the value of time (x) and outputs a value of the animated property (y). Recalling back to middle school algebra, f(x) = y-style functions are a form that can be represented on a 2D graph. The basic linear timing function looks as one might expect, a line:

更准确地说，计时功能输入时间(x)的值，并输出动画属性(y)的值。 回想一下中学代数， f(x) = y函数是一种可以在2D图上表示的形式。 基本的线性计时功能看起来就像一条线：

Ease In Out is a gentle curve which shows how it will start and end at slower speeds:

“缓入缓出”是一条柔和的曲线，显示了如何以较慢的速度开始和结束：

This timing function is created with the mathematics of a cubic Bézier curve. By changing the control points affecting curvature, different acceleration and decelerations can be achieved:

此计时函数是用三次贝塞尔曲线的数学函数创建的。 通过更改影响曲率的控制点，可以实现不同的加速度和减速度：

The property values can even dip below the minimum value or above the maximum value, creating anticipation and overshoot timing functions:

这些属性值甚至可以低于最小值或高于最大值，从而创建预期和过冲定时功能：

Tumult Hype offers more power yet: several bézier curves can be combined to form multi-curve paths. These can be used for a variety of effects such as bouncing or elasticity:

Tumult Hype还提供了更多功能：可以组合多个贝塞尔曲线以形成多曲线路径。 这些可以用于多种效果，例如弹跳或弹性：

关注动画中的定时功能的一般推理 (General Reasoning for Focusing on Timing Functions in Your Animations)

Nature does not move mechanically like the linear timing function above. Timing functions like easing therefore serve a critical role in humanizing the elements you are animating. This helps present information cleanly and clearly. It directs focus.

自然不会像上面的线性计时功能那样机械地运动。 因此，诸如缓动之类的计时功能在人化要设置动画的元素方面起着至关重要的作用。 这有助于清晰清晰地呈现信息。 它引导焦点。

Good timing helps give meaning to animations. It turns lifeless shapes into reality. Some can help convey emotion which is critical to branding. Other timings can entertain and engage.

良好的时机有助于赋予动画意义。 它使无生命的形状变为现实。 有些可以帮助传达对品牌至关重要的情感。 其他时间可以娱乐和参与。

The movement of “inanimate” objects is governed more by physics. “Animate” objects are governed by their own thoughts and emotions. Both styles can be modeled with timing functions.

“无生命”物体的运动更多地受物理学支配。 “动画”对象受其自己的思想和情感支配。 两种样式都可以使用计时功能建模。

在Tumult Hype中应用计时功能 (Applying Timing Functions in Tumult Hype)

Editing the timing function of an animation in Tumult Hype is easy. Step zero is making the animation, so if you’re unfamiliar check out the tutorials and documentation.

在Tumult Hype中编辑动画的定时功能很容易。 第一步是制作动画，因此，如果您不熟悉，请查看教程和文档 。

To adjust a single animation’s timing function, you can double-click the animation indicator bar between keyframes in the per-property area:

要调整单个动画的计时功能，您可以双击每个属性区域中关键帧之间的动画指示条：

If multiple animations are selected, you can use the Timing Function Pop Up Button on the right side of the timeline interface:

如果选择了多个动画，则可以使用时间线界面右侧的“定时功能弹出”按钮：

When no animations are selected, the default timing function is shown as the title of the timing function pop up button.

如果未选择动画，则默认计时功能将显示为计时功能弹出按钮的标题。

In Hype Professional, this interface allows for manipulating control points and adding new points on the curve to form your own custom timing functions. Timing functions can be named so they are saved for future use in the Hype document. They can also be set as the default timing function for any new animations:

在Hype Professional中 ，此界面允许操纵控制点并在曲线上添加新点以形成您自己的自定义计时功能。 可以命名计时功能，以便将其保存以供将来在Hype文档中使用。 也可以将它们设置为任何新动画的默认计时功能：

This editor is similar to other vector editing apps. Here’s the cheat sheet to manipulate control points:

该编辑器类似于其他矢量编辑应用程序。 这是操纵控制点的备忘单：

• Click on curve: add new point点击曲线：添加新点
• Delete key: remove control point删除键：删除控制点
• Option-Click: Convert to angled vertex按住Option键单击：转换为成角度的顶点
• Option-Drag: drag out new control pointsOption-拖动：拖出新的控制点
• Option (while dragging control point): mirrored选项(拖动控制点时)：已镜像
• Command (while dragging control point): disconnected命令(拖动控制点时)：已断开

• none (just dragging control point): Asymmetric

  无 (仅拖动控制点)：不对称

• Shift (while dragging control point): Keep at 45° angles移位(在拖动控制点时)：保持45°角

使用计时功能的实用技巧 (Practical Tips for Using Timing Functions)

• Crafting and choosing timing functions is a skill, experience will make one better.精心设计和选择计时功能是一项技能，经验会更好。
• Let your animation “rest” by going a few days without looking at it, and see if you still like it when you come back. Or get feedback from peers.让您的动画“休息”几天而不看它，然后看看回来后是否仍然喜欢它。 或从同行那里获得反馈。
• Looped animations should generally use a Linear timing function. Ease-based timing functions would create a stop point or jump at the start of the loop cycle.循环动画通常应使用线性定时功能。 基于轻松的计时功能将在循环周期开始时创建一个停止点或跳转。
• Avoid significant Easing In (slow acceleration) with animations that were triggered by user actions as it will feel sluggish.避免用户动作触发的动画出现明显的缓入(慢加速)现象，因为这样做会感觉缓慢。
• Overshoot (Back) and Anticipation (Reverse Back) can be effects that can look glorious, but often this goes against the purpose of an animation of helping a viewer associate actions. Further, these can waste a user’s time since they tend to take longer. Use sparingly.过冲(后退)和预期(后退)可能是看起来光彩夺目的效果，但通常这与帮助观看者关联动作的动画目的背道而驰。 此外，由于它们倾向于花费更长的时间，因此会浪费用户的时间。 谨慎使用。
• It can be good to experiment with using the same animation durations and different timing functions for more visual intrigue or to express differing weight/inertia. That said, unless animating from natural models or characters, it is better to not go overboard with too many different timing functions. Don’t forget to also experiment with staggering animation start times or slightly changing duration instead.尝试使用相同的动画持续时间和不同的计时功能来获得更好的视觉吸引力或表达不同的体重/惯性可能会很好。 也就是说，除非从自然模型或角色进行动画制作，否则最好不要过多地使用太多不同的计时功能。 别忘了尝试一下惊人的动画开始时间或稍微改变一下持续时间。
• Just as visuals often have a spec controlling line weights and color palettes, it is good to come up with a design language for animations including durations and timing functions used, along with rationale for what circumstances to choose which timing function.就像视觉效果通常具有控制线宽和调色板的规范一样，最好为动画设计语言，包括使用的持续时间和计时功能，以及在什么情况下选择哪种计时功能的原理。

• Observe nature and understand the mathematics of gravity/physics as this can help inform how to compose animations. For example, to make a bouncing object, the Y value should use the Bounce timing function. The X value should have a linear timing function because there are no forces acting on that axis. Even if well understood, sometimes it is just easier to use a physics engine.

  观察自然并了解重力/物理学的数学原理，因为这可以帮助指导如何制作动画。 例如，要创建弹跳对象，Y值应使用弹跳计时功能。 X值应具有线性定时功能，因为在该轴上没有作用力。 即使了解得很好，有时使用物理引擎也更容易。

• Get inspiration from nature or from master animators:

  从大自然或动画大师那里获得灵感：

  • Timing for Animation by John Halas and Harold Whitaker

    John Halas和Harold Whitaker的动画制作时间

  • The Animator’s Survival Kit by Richard Williams

    理查德·威廉姆斯(Richard Williams) 的动画师生存套装

结论 (Conclusion)

Manipulating timing functions is an advanced step in creating meaningful animations. They can help both model physics, emotion, or simply reduce keyframe construction. Tumult Hype’s custom timing function editor gives power and flexibility to help make your best animations.

操纵定时功能是创建有意义的动画的高级步骤。 它们可以帮助建立物理模型，情感模型，或者只是简化关键帧的构建。 Tumult Hype的自定义计时功能编辑器具有强大的功能和灵活性，可以帮助您制作出最佳的动画。

If you’d like to give Hype a go, right now as a SitePoint user you can get Hype Standard for 50% off at $24.99 USD.

如果您想试用Hype，现在作为SitePoint用户，可以24.99美元的价格获得Hype Standard的50％折扣。

Or if you’re after the version with all the bells and whistles, we’re also offering a 25% discount for Hype Professional at $74.99 USD.

或者，如果您想购买所有版本，我们还为Hype Professional提供25％的折扣，价格为$ 74.99美元。

翻译自: https://www.sitepoint.com/advanced-timing-functions-easing-web-animations-tumult-hype/