关于前端:Web-动画原则及技巧浅析

在 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

这里实现了一个潜艇向前游动的画面，动画自身还有很多能够优化的中央。但也有一些值得学习必定的中央，动画应用了尾浆转动和气泡和海底风物挪动。

同时，值得注意的是，窗口的反光也是一个很小的细节，示意船体在挪动，这个就属于一个主要动作，衬托出主体的挪动。

再看看上面这打印动画，键盘上按键的上上下下模仿了点击成果，其实也是个主要动作，烘托主体动画成果：

![Secondary Action – CodePen Home
CSS Typewriter](https://p3-juejin.byteimg.com…

CodePen Demo — CSS Typewriter By Aaron Iker

Timing — 工夫节奏

工夫是指给定动作的绘图或帧数，它转化为动画动作的速度。

在纯正的物理层面上，正确的计时会使物体看起来恪守物理定律。例如，物体的分量决定了它对推动力的反馈，因为重量轻的物体会比分量大的物体反馈更快。

同一个动画，应用不同的速率展现，其成果往往相差很多。对于 Web 动画而言，可能只须要调整 animation-duration 或 transition-duration 的值。

原理示意图：

能够看出，同个动画，不同的缓动函数，或者赋予不同的工夫，就能产生很不一样的成果。

当然，工夫节奏能够使用在很多中央，譬如在一些 Loading 动画中：

CodePen Demo — Only Css 3D Cube By Hisami Kurita

又或者是这样，同个动画，不同的速率：

CodePen Demo — Rotating Circles Preloader

也能够是同样的提早、同样的速率，然而不同的方向：

CodePen Demo — 2020 SVG Animation By @keyframers

Exaggeration — 夸大手法

夸大是一种对动画特地有用的成果，因为力求完满模拟事实的动画动作可能看起来是动态和爽朗的。

应用夸大时，肯定水平的克服很重要。如果一个场景蕴含多个元素，则应均衡这些元素之间的关系，以防止混同或吓倒观众。

原理示意图：

OK，不同水平的展示对成果的感官是不一样的，比照上面两个故障艺术动画：

轻微晃动故障：

重大晃动故障：

CodePen Demo — Glitch Animation

能够看出，第二个动画显著能感触到比第一个更重大的故障。

过多的现实主义会毁掉动画，或者说让它不足吸引力，使其显得动态和乏味。相同，为元素对象增加一些夸大，使它们更具生机，可能让它们更吸引眼球。

Solid drawing — 扎实的描述

这个准则示意咱们的动画须要尊重真实性，譬如一个 3D 平面绘图，就须要思考元素在三维空间中的模式。

理解把握三维形态、解剖学、分量、均衡、光影等的基础知识。有助于咱们绘制出更为真切的动画成果。

原理示意图：

再再看看上面这个动画，名为 Close the blinds — 关上百叶窗：

CodePen Demo — Close the blinds By Chance Squires

hover 的时候有一个关上动画，应用多块 div 模仿了百叶窗的落下，同时配合了背景色从亮堂到光明的过程，很好的利用了色调光影辅助动画的展现。

再看看这个摆锤小动画，也是十分好的应用了光影、视角元素：

CodePen Demo — The Three-Body Problem By Vian Esterhuizen

最初这个 Demo，尽管是应用 CSS 实现的，然而也尽可能的还原模仿了事实中纸张飞舞的状态，并且对纸张下方暗影的变动也做了肯定的变动：

CodePen Demo — D CSS-only flying page animation tutorial By @keyframers

好的动画，细节是经得起斟酌的。

Appeal — 吸引力

一反平常，精美的细节往往能十分好的吸引用户的注意力。

吸引力是艺术作品的特质，而如何实现有吸引力的作品则须要一直的尝试。

原理示意图：

我感觉这一点可能是 Web 动画的外围，一个可能吸引人的动画，它必定是有某些特质的，让咱们一起来观赏下。

CodePen Demo — Download interaction By Milan Raring

通过一连串的动作，动画开展、箭头挪动、进度条填满、数字变动，把一个下载动画展现的十分 Nice，让人在期待的过程并不感觉干燥。

再来看看这个视频播放的成果：

CodePen Demo — Video button animation – Only CSS

通过一个遮罩 hover 放大，再到点击全屏的变动，一下子就将用户的注意力给吸引了过去。

Web 动画的一些常见误区

当然，上述的一些技巧源自于 迪士尼动画准则，咱们能够将其中的一些思维贯通于咱们的 Web 动画的设计之中。

然而，必须指出的是，Web 动画自身在应用的时候，也有一些准则是咱们须要留神的。次要有上面几点：

• 加强动画与页面元素之间的关联性
• 不要为了动画而动画，要有目的性
• 动画不要过于迟缓，否则会妨碍交互

加强动画与页面元素之间的关联性

这个是一个常见的问题，常常会看到一些动画与主体之间没有关联性。关联性背地的逻辑，能帮忙用户在界面布局中了解刚产生的变动，是什么导致了变动。

好的动画能够做到将页面的多个环节或者场景无效串联。

比拟上面两个动画，第二个就比第一个更有关联性：

没有强关联性的：

有关联性的：

很显著，第二个动画比第一个动画更能让用户理解页面产生的变动。

不要为了动画而动画，要有目的性

这一点也很重要，不要为了动画而动画，要有目的性，很多时候很多页面的动画十分莫名其妙。

emm，简略一点来说就是单纯的为了炫技而存在的动画。这种动画能够存在于你的 Demo，你的集体网站中，但不太适宜用于线上业务页面中。

应用动画应该有明确的目的性，譬如 Loading 动画可能让用户感知到页面正在发生变化，正在加载内容。

在咱们的交互过程中，适当的减少过渡与动画，可能很好的让用户感知到页面的变动。相似的还有一些滚动动画。丝滑的滚动切换比突兀的内容显著是更好的体验。

动画不要过于迟缓，否则会妨碍交互

迟缓的动画，它产生了不必要的进展。

一些用户会频繁看到它们的过渡动画，尽可能的放弃简短。让动画持续时间放弃在 300ms 或更短。

比拟上面两个动画，第一次可能会让用户耳目一新，然而如果用户在浏览过程中频繁呈现通过操作，过长的转场动画会耗费用户大量不必要的工夫：

过长的转场动画：

缩短转场动画工夫，放弃失当的时长：

联合产品及业务的创意交互动画

这一点是比拟有意思的。我集体认为，Web 动画做得好用的妙，是能十分好的晋升用户体验，晋升品牌价值的。

联合产品及业务的创意动画，是须要开掘，一直打磨的一直迭代的。譬如大家津津有味的 BiliBili 官网，它的顶部 Banner，配合一些节日、流动，常常就会有呈现一些有意思的创意交互动画。简略看两个：

以及这个：

我十分屡次在不同中央看到有人探讨 Bilibili 的顶部 banner 动画，可见它这块的动画是胜利的。很好的联合了一些节日、实事、热点，当成了一种比拟固定的产品去一直新陈代谢，在不同时候给与用户不同的体验。

思考动画的性价比

最初一条，就是动画虽好，然而打磨一个精品动画是十分耗时的，尤其是在当初十分多的产品业务都是处于一种麻利开发迭代之下。

一个好的 Web 动画从构思到落地，绝非前端一个人的工作，须要产品、设计、前端等等相干人员公共致力，一直批改能力最终出现比拟好的成果。所以在我的项目初期，肯定须要思考好性价比，是否真的值得为了一个 Web 动画破费几天工夫呢？当然这是一个十分见仁见智的问题。

参考文章

• 原理图起源 — Understand Disney’s 12 principles of animation
• Animation Principles for the Web
• [[译文]网页动画的十二准则](https://cssanimation.rocks/cn…
• Twelve basic principles of animation
• 功能性动画设计：优良的转场成果

最初

想应用 Web 技术绘制生动有趣的动画并非易事，尤其在当初国内的大环境下，鲜有人会去钻研动画准则，并使用于实际生产之中。然而它自身的确是个十分有意思有技术的事件。心愿本文能给大伙对 Web 动画的认知带来一些晋升和帮忙，在后续的工作中多少使用一些。

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。