共计 6476 个字符，预计需要花费 17 分钟才能阅读完成。
在 Web 动画方面，有一套十分经典的准则 — Twelve basic principles of animation，也就是对于动画的 12 个根本准则（也称之为迪士尼动画准则），网上对它的解读延长的文章也十分之多：
- Animation Principles for the Web
- [[译文]网页动画的十二准则](https://cssanimation.rocks/cn…
其中应用的示例 DEMO 属于比较简单易懂，然而没有很好地体现在理论生产中应该如何灵活运用。明天本文将带大家再次温习温习，并且替换其中的最根本的 DEMO，换成一些到明天十分实用，十分酷炫的动画 DEMO 成果。
Squash and stretch — 挤压和拉伸
挤压和拉伸的目标是为绘制的对象赋予分量感和灵活性。它能够利用于简略的物体，如弹跳球，或更简单的构造，如人脸的肌肉组织。
利用在动画中，这一准则最重要的方面是对象的体积在被挤压或拉伸时不会扭转。如果一个球的长度被垂直拉伸，它的宽度（三个维度，还有它的深度）须要相应地程度膨胀。
看看下面这张图，很显著左边这个静止轨迹要比右边的实在很多。
原理动画如下：
相似的一些比拟有意思的 Web 动画 DEMO：
CodePen Demo — CSS Flippy Loader 🍳 By Jhey
认真看下面这个 Loading 动画，每个块在跳起之前都会有一个压缩筹备动作，在压缩的过程中高度变低，宽度变宽，这就是挤压和拉伸，让动画看上去更加实在。
OK，再看两个相似的成果，加深下印象：
CodePen Demo — CSS Loading Animation
CodePen Demo — CSS Animation Loader – Jelly Box
简略总结一下，挤压和拉伸的外围在于放弃对象的体积统一，当拉伸元素时，它的宽度须要变薄，而当挤压元素时，它的宽度须要变宽。
Anticipation — 准备动作
筹备动作用于为次要的动画动作做好筹备，并使动作看起来更真切。
譬如从地板上跳下来的舞者必须先蜿蜒膝盖，挥杆的高尔夫球手必须先将球杆向后挥动。
原理动画如下，可能看到滚动之前的一些筹备动作：
看看一些理论利用的 chang 场景，上面这个动画成果：
CodePen Demo — Never-ending box By Pawel
小球向上滚动，然而认真看的话，每次向上滚动的时候都会先向后摆一下，能够了解为是一个蓄力动作，也就是咱们说的筹备动作。
相似的，看看这个购物车动画，使用了十分多的小技巧，其中之一就是，车在向前冲之前会后退一点点进行一个蓄力动作，整个动画的感觉显著就不一样，它让动画看起来更加的天然：
Staging — 上演布局
Staging 意为上演布局，它的目标是疏导观众的注意力，并明确一个场景中什么是最重要的。
能够通过多种形式来实现，例如在画面中搁置角色、应用光影，或相机的角度和地位。该准则的实质是关注核心内容，防止其余不必要的细节吸引走用户的注意力。
原理动画如下：
上述 Gif 原理图成果不太显著，看看示例成果：
CodePen Demo — CSS Loading Animation
该技巧的外围就是在动画的过程中把主体凸显，把非主体元素通过含糊、变淡等形式弱化其成果，升高用户在其之上的注意力。
Straight-Ahead Action and Pose-to-Pose — 间断静止和姿势对应
其实示意的就是逐帧动画和补间动画：
- FrameAnimation（逐帧动画）：将多张图片组合起来进行播放，能够利用 CSS Aniation 的 Steps，画面由一帧一帧形成，相似于漫画书
- TweenAnimation（补间动画）：补间动画是在工夫帧上进行关键帧绘制，不同于逐帧动画的每一帧都是关键帧，补间动画能够在一个关键帧上绘制一个根底形态，而后在工夫帧上对另一个关键帧进行形态转变或绘制另一个形态等，而后两头的动画过程是由计算机主动生成。
这个应该是属于最根底的了，在不同场景下有不同的妙用。咱们在用 CSS 实现动画的过程中，应用的比拟多的应该是补间动画，逐帧动画也很有意思，譬如设计师设计好的简单动画，利用多张图片拼接成逐帧动画也十分不错。
逐帧动画和补间动画实用在不同的场合，没有谁更好，只有谁更适合，比拟上面两个时钟动画，其中一个的秒针使用的是逐帧动画，另外一个则是补间动画：
- 时钟秒针使用的是逐帧动画：
CodePen Demo — CSS3 Working Clock By Ilia
- 时钟秒针使用的是补间动画：
CodePen Demo — CSS Rotary Clock By Jake Albaugh
有的时候一些简单动画无奈应用 CSS 间接实现的，也会利用逐帧的成果近似实现一个补间动画，像是苹果这个耳机动画，就是理论逐帧动画，然而看起来是间断的：
CodePen Demo — Apple AirPods Pro Animation (final demo) By Blake Bowen
这里其实是多张图片的疾速轮播，每张图片示意一个关键帧。
Follow through and overlapping action 追随和重叠动作
追随和重叠动作是两种密切相关的技术的总称，它们有助于更实在地渲染静止，并有助于给人一种印象，即静止的元素遵循物理定律，包含惯性原理。
- 追随 意味着在角色进行后，身材涣散连贯的局部应该继续移动，并且这些局部应该继续移动到角色进行的点之外，而后才被拉回到重心或体现出不同的水平的振荡阻尼；
- 重叠动作 是元素各局部以不同速率挪动的趋势（手臂将在头部的不同工夫挪动等等）；
- 第三种相干技术是 拖动，元素开始挪动，其中一部分须要几帧能力追上。
要发明一个重叠动作的感觉，咱们能够让元件以略微不同的速度挪动到每处。这是一种在 iOS 零碎的视窗过渡中被使用得很好的办法。一些按钮和元件以不同速率静止，整体成果会比全副货色以雷同速率静止要更真切，并留出工夫让访客去适当了解变动。
原理示意图：
看看上面这个购物车动画，认真看购物车，在挪动到进行的过程中，有个很显著的刹车再拉回的感觉，这里使用到了追随的成果，让动画更加活泼实在：
Slow In and Slow Out — 缓入缓出
事实世界中物体的静止，如人体、动物、车辆等，须要工夫来减速和加速。
实在的静止成果，它的缓动函数肯定不是 Linear。出于这个起因，静止往往是逐渐减速并在进行前变慢，实现一个慢进和慢出的成果，以贴近更真切的动作。
示意图：
这个还是很好了解的。真实世界中，很少有缓动函数是 Linear 的静止。
Arc — 弧线静止
大多数天然动作偏向于遵循一个拱形轨迹，动画应该遵循这个准则，遵循隐含的 弧形 以取得更大的真实感。
原理示意图：
嗯哼，在很多动画中，应用弧线代替直线，可能让动画成果更佳的真切。看看上面这个烟花粒子动画：
CodePen Demo — Particles, humankind’s only weakness By Rik Schennink
整个烟花粒子动画看上去十分的天然，因为每个粒子的着落都遵循了自由落体的法则，它们的静止轨迹都是弧线而不是直线。
Secondary Action — 主要动作
将主要动作增加到次要动作能够使场景更加活泼，并有助于反对次要动作。走路的人能够同时摆动手臂或将手臂放在口袋里，谈话或吹口哨，或者通过面部表情来表白情绪。
原理示意图：
简略的一个利用实例，看看上面这个动画：
CodePen Demo — Submarine Animation (Pure CSS) By Akhil Sai Ram
这里实现了一个潜艇向前游动的画面，动画自身还有很多能够优化的中央。但也有一些值得学习必定的中央，动画应用了尾浆转动和气泡和海底风物挪动。
同时，值得注意的是，窗口的反光也是一个很小的细节，示意船体在挪动，这个就属于一个主要动作，衬托出主体的挪动。
再看看上面这打印动画，键盘上按键的上上下下模仿了点击成果，其实也是个主要动作，烘托主体动画成果：
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。