关节动画概念_核心动画概念：预期和贯彻

关节动画概念

We can create more realistic CSS animations on our pages by using principles established by classical animators, such as the “Nine Old Men” of Disney, and even earlier, from the antecedents of Greek theatre.

我们可以使用经典动画师(例如迪斯尼的“九个老人”)甚至更早的希腊剧院前辈确立的原理在页面上创建更逼真的CSS动画 。

Anticipation is the motion before a main action sequence, usually in the direction opposite to the main action: think of a baseball pitcher winding up to throw a strike, or an archer drawing a bow. Anticipation builds momentum and tension to your animation, telegraphing the action to come to the audience. Moving an element down (“antic down”) implies that the main action will be upward; “big antic” in one direction usually precedes large, swift motion in the opposite direction.

预期是在一个主要动作序列之前的动作，通常是在与主要动作相反的方向上进行动作：想像一下棒球投手弯腰进行罢工，或者是弓箭手拉弓。 预期会为您的动画增添动力和张力，以电报的形式传达给观众。 向下移动元素(“向下倾斜”)意味着主要动作将向上； 在一个方向上的“大动作”通常先于在相反方向上的大动作。

Follow-through is the recovery portion of the movement, after the main action sequence; think of the motion of that baseball pitcher immediately after the ball is released.

跟随是动作的恢复部分，在主要动作序列之后； 想一想释放球后立即投下那个棒球投手的动作。

Both of these concepts tie into using exaggeration to show extremes of motion that would not occur in real life. (Note that the degree of exaggeration is an artistic interpretation, rather than a natural physical property: historically Disney uses subtle exaggeration, whereas animation production houses like Hanna-Barbera used it to extremes). Ease-in and ease-out also play a part.

这两个概念都通过夸张来显示现实生活中不会发生的极端运动。 (请注意，夸张的程度是一种艺术性的解释，而不是自然的物理属性：迪士尼在历史上使用的是微妙的夸张，而像汉娜·巴贝拉这样的动画制作公司则将其夸大了)。 缓入和缓出也起作用。

To recreate these principles in CSS, we can introduce values for our Bezier timing functions that are negative and/or greater than 1. This creates an S-shaped Bezier curve, as you can see to the right, and the CSS transition code below:

要在CSS中重新创建这些原理，我们可以为Bezier计时函数引入负值和/或大于1的值。这将创建一个S形的Bezier曲线，如右图所示，以及下面CSS转换代码：

Example of anticipation and follow-through in CSS3 animation

CSS3动画中的预期和后续示例

Used for a simple transition on hover (note that the code below lacks vendor prefixes):

用于悬停时的简单转换(请注意，以下代码缺少供应商前缀 )：

img#merida {
	width: 114px; height: 114px;
	margin-left: 50px;
	border-radius: 6px;
	overflow: hidden;
	display: block;
	box-shadow: 6px 6px 4px rgba(0,0,0,0.3);
	transition: all 1.3s cubic-bezier(0.500, -0.440, 0.670, 1.475);
}
img#merida:hover {
	transform: translateX(500px);
}

翻译自: https://thenewcode.com/555/Core-Animation-Concepts-Anticipation-and-Follow-Through

关节动画概念