譯者 |?@Ethon Lau
譯文 | https://cssanimation.rocks/cn/principles/
作者 | @donovanh
原文 |?https://cssanimation.rocks/principles/

作為前端的設(shè)計(jì)師和工程師，我們用 css 去做樣式、定位并創(chuàng)建出好看的網(wǎng)站。我們經(jīng)常用 css 去添加頁(yè)面的運(yùn)動(dòng)過(guò)渡效果甚至動(dòng)畫(huà)，但我們經(jīng)常做的東西不會(huì)超過(guò)這些。

動(dòng)效是一個(gè)有助于訪客和消費(fèi)者理解我們?cè)O(shè)計(jì)的強(qiáng)有力工具。這里有些原則能最大限度地應(yīng)用在我們的工作中。

迪士尼經(jīng)過(guò)基礎(chǔ)工作練習(xí)的長(zhǎng)時(shí)間累積，在 1981 年出版的 The Illusion of Life: Disney Animation 一書(shū)中發(fā)表了動(dòng)畫(huà)的十二個(gè)原則 (12 Principles of Animation) 。這些原則描述了動(dòng)畫(huà)能怎樣用于讓觀眾相信自己沉浸在現(xiàn)實(shí)世界中。

1、擠壓和拉伸 (Squash and stretch)

這是物體存在質(zhì)量且運(yùn)動(dòng)時(shí)質(zhì)量保持不變的概念。當(dāng)一個(gè)球在彈跳時(shí)，碰擊到地面會(huì)變扁，恢復(fù)的時(shí)間會(huì)越來(lái)越短。

創(chuàng)建對(duì)象的時(shí)候最有用的方法是參照實(shí)物，比如人、時(shí)鐘和彈性球。

當(dāng)它和網(wǎng)頁(yè)元件一起工作時(shí)可能會(huì)忽略這個(gè)原則。DOM 對(duì)象不一定和實(shí)物相關(guān)，它會(huì)按需要在屏幕上縮放。例如，一個(gè)按鈕會(huì)變大并變成一個(gè)信息框，或者錯(cuò)誤信息會(huì)出現(xiàn)和消失。

盡管如此，擠壓和伸縮效果可以為一個(gè)對(duì)象增加實(shí)物的感覺(jué)。甚至一些形狀上的小變化就可以創(chuàng)造出細(xì)微但搶眼的效果。

<article><div></div><div></div></article>.one .shape {animation: one 4s infinite ease-out; }.one .surface {background: #000;height: 10em;width: 1em;position: absolute;top: calc(50% - 4em);left: calc(50% + 10em); }@keyframes one {0%, 15% {opacity: 0;}15%, 25% {transform: none;animation-timing-function: cubic-bezier(1,-1.92,.95,.89);width: 4em;height: 4em;top: calc(50% - 2em);left: calc(50% - 2em);opacity: 1;}35%, 45% {transform: translateX(8em);height: 6em;width: 2em;top: calc(50% - 3em);animation-timing-function: linear;opacity: 1;}70%, 100% {transform: translateX(8em) translateY(5em);height: 6em;width: 2em;top: calc(50% - 3em);opacity: 0;} }body {margin: 0;background: #e9b59f;font-family: HelveticaNeue, Arial, Sans-serif;color: #fff; }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); } 2、預(yù)備動(dòng)作 (Anticipation)

運(yùn)動(dòng)不傾向于突然發(fā)生。在現(xiàn)實(shí)生活中，無(wú)論是一個(gè)球在掉到桌子前就開(kāi)始滾動(dòng)，或是一個(gè)人屈膝準(zhǔn)備起跳，運(yùn)動(dòng)通常有著某種事先的累積。

我們能用它去讓我們的過(guò)渡動(dòng)畫(huà)顯得更逼真。預(yù)備動(dòng)作可以是一個(gè)細(xì)微的反彈，幫人們理解什么對(duì)象將在屏幕中發(fā)生變化并留下痕跡。

例如，懸停在一個(gè)元件上時(shí)可以在它變大前稍微縮小，在初始列表中添加額外的條目來(lái)介紹其它條目的移除方法。

<article><div></div><div></div></article>.two .shape {animation: two 5s infinite ease-out;transform-origin: 50% 7em; }.two .surface {background: #000;width: 8em;height: 1em;position: absolute;top: calc(50% + 4em);left: calc(50% - 3em); }@keyframes two {0%, 15% {opacity: 0;transform: none;}15%, 25% {opacity: 1;transform: none;animation-timing-function: cubic-bezier(.5,.05,.91,.47);}28%, 38% {transform: translateX(-2em);}40%, 45% {transform: translateX(-4em);}50%, 52% {transform: translateX(-4em) rotateZ(-20deg);}70%, 75% {transform: translateX(-4em) rotateZ(-10deg);}78% {transform: translateX(-4em) rotateZ(-24deg);opacity: 1;}86%, 100% {transform: translateX(-6em) translateY(4em) rotateZ(-90deg);opacity: 0;} } .principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

3、演出布局 (Staging)

演出布局是確保對(duì)象在場(chǎng)景中得以聚焦，讓場(chǎng)景中的其它對(duì)象和視覺(jué)在主動(dòng)畫(huà)發(fā)生的地方讓位。這意味著要么把主動(dòng)畫(huà)放到突出的位置，要么模糊其它元件來(lái)讓用戶(hù)專(zhuān)注于看他們需要看的東西。

在網(wǎng)頁(yè)方面，一種方法是用 model 覆蓋在某些內(nèi)容上。在現(xiàn)有頁(yè)面添加一個(gè)遮罩并把那些主要關(guān)注的內(nèi)容前置展示。

另一種方法是用動(dòng)作。當(dāng)很多對(duì)象在運(yùn)動(dòng)，你很難知道哪些值得關(guān)注。如果其它所有的動(dòng)作停止，只留一個(gè)在運(yùn)動(dòng)，即使動(dòng)得很微弱，這都可以讓對(duì)象更容易被察覺(jué)。

還有一種方法是做一個(gè)晃動(dòng)和閃爍的按鈕來(lái)簡(jiǎn)單地建議用戶(hù)比如他們可能要保存文檔。屏幕保持靜態(tài)，所以再細(xì)微的動(dòng)作也會(huì)突顯出來(lái)。

<article><div></div><div></div><div></div></article>.three .shape.a {transform: translateX(-12em); }.three .shape.c {transform: translateX(12em); }.three .shape.b {animation: three 5s infinite ease-out;transform-origin: 0 6em; }.three .shape.a, .three .shape.c {animation: threeb 5s infinite linear; }@keyframes three {0%, 10% {transform: none;animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53);}26%, 30% {transform: rotateZ(-40deg);}32.5% {transform: rotateZ(-38deg);}35% {transform: rotateZ(-42deg);}37.5% {transform: rotateZ(-38deg);}40% {transform: rotateZ(-40deg);}42.5% {transform: rotateZ(-38deg);}45% {transform: rotateZ(-42deg);}47.5% {transform: rotateZ(-38deg);animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53);}58%, 100% {transform: none;} }@keyframes threeb {0%, 20% {filter: none;}40%, 50% {filter: blur(5px);}65%, 100% {filter: none;} }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

4、連續(xù)運(yùn)動(dòng)和姿態(tài)對(duì)應(yīng) (Straight-Ahead Action and Pose-to-Pose)

連續(xù)運(yùn)動(dòng)是繪制動(dòng)畫(huà)的每一幀，姿態(tài)對(duì)應(yīng)是通常由一個(gè) assistant 在定義一系列關(guān)鍵幀后填充間隔。

大多數(shù)網(wǎng)頁(yè)動(dòng)畫(huà)用的是姿態(tài)對(duì)應(yīng)：關(guān)鍵幀之間的過(guò)渡可以通過(guò)瀏覽器在每個(gè)關(guān)鍵幀之間的插入盡可能多的幀使動(dòng)畫(huà)流暢。

有一個(gè)例外是定時(shí)功能 step。通過(guò)這個(gè)功能，瀏覽器?“steps” 可以把盡可能多的無(wú)序幀串清晰。你可以用這種方式繪制一系列圖片并讓瀏覽器按順序顯示出來(lái)，這開(kāi)創(chuàng)了一種逐幀動(dòng)畫(huà)的風(fēng)格。

<article><div></div><div></div></article>.four .shape.a {left: calc(50% - 8em);animation: four 6s infinite cubic-bezier(.57,-0.5,.43,1.53); }.four .shape.b {left: calc(50% + 8em);animation: four 6s infinite steps(1); }@keyframes four {0%, 10% {transform: none;}26%, 30% {transform: rotateZ(-45deg) scale(1.25);}40% {transform: rotateZ(-45deg) translate(2em, -2em) scale(1.8);}50%, 75% {transform: rotateZ(-45deg) scale(1.1);}90%, 100% {transform: none;} }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

5、跟隨和重疊動(dòng)作 (Follow Through and Overlapping Action)

事情并不總在同一時(shí)間發(fā)生。當(dāng)一輛車(chē)從急剎到停下，車(chē)子會(huì)向前傾、有煙從輪胎冒出來(lái)、車(chē)?yán)锏乃緳C(jī)繼續(xù)向前沖。

這些細(xì)節(jié)是跟隨和重疊動(dòng)作的例子。它們?cè)诰W(wǎng)頁(yè)中能被用作幫助強(qiáng)調(diào)什么東西被停止，并不會(huì)被遺忘。例如一個(gè)條目可能在滑動(dòng)時(shí)稍滑微遠(yuǎn)了些，但它自己會(huì)糾正到正確位置。

要?jiǎng)?chuàng)造一個(gè)重疊動(dòng)作的感覺(jué)，我們可以讓元件以稍微不同的速度移動(dòng)到每處。這是一種在 iOS 系統(tǒng)的視窗 過(guò)渡中被運(yùn)用得很好的方法。一些按鈕和元件以不同速率運(yùn)動(dòng)，整體效果會(huì)比全部東西以相同速率運(yùn)動(dòng)要更逼真，并留出時(shí)間讓訪客去適當(dāng)理解變化。

在網(wǎng)頁(yè)方面，這可能意味著讓過(guò)渡或動(dòng)畫(huà)的效果以不同速度來(lái)運(yùn)行。

<article> <div><div></div></div></article>.five .shape {animation: five 4s infinite cubic-bezier(.64,-0.36,.1,1);position: relative;left: auto;top: auto; }.five .shape-container {animation: five-container 4s infinite cubic-bezier(.64,-0.36,.1,2);position: absolute;left: calc(50% - 4em);top: calc(50% - 4em); }@keyframes five {0%, 15% {opacity: 0;transform: translateX(-12em);}15%, 25% {transform: translateX(-12em);opacity: 1;}85%, 90% {transform: translateX(12em);opacity: 1;}100% {transform: translateX(12em);opacity: 0;} }@keyframes five-container {0%, 35% {transform: none;}50%, 60% {transform: skewX(20deg);}90%, 100% {transform: none;} } .principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

6、緩入緩出 (Slow In and Slow Out)

對(duì)象很少?gòu)撵o止?fàn)顟B(tài)一下子加速到最大速度，它們往往是逐步加速并在停止前變慢。沒(méi)有加速和減速，動(dòng)畫(huà)感覺(jué)就像機(jī)器人。

在 CSS 方面，緩入緩出很容易被理解，在一個(gè)動(dòng)畫(huà)過(guò)程中計(jì)時(shí)功能是一種描述變化速率的方式。

使用計(jì)時(shí)功能，動(dòng)畫(huà)可以由慢加速 (ease-in)、由快減速 (ease-out)，或者用貝塞爾曲線做出更復(fù)雜的效果。

<article><div></div></article>.six .shape {animation: six 3s infinite cubic-bezier(0.5,0,0.5,1); }@keyframes six {0%, 5% {transform: translate(-12em);}45%, 55% {transform: translate(12em);}95%, 100% {transform: translate(-12em);} }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

7、弧線運(yùn)動(dòng) (Arc)

雖然對(duì)象是更逼真了，當(dāng)它們遵循「緩入緩出」的時(shí)候它們很少沿直線運(yùn)動(dòng)——它們傾向于沿弧線運(yùn)動(dòng)。

我們有幾種 CSS 的方式來(lái)實(shí)現(xiàn)弧線運(yùn)動(dòng)。一種是結(jié)合多個(gè)動(dòng)畫(huà)，比如在彈力球動(dòng)畫(huà)里，可以讓球上下移動(dòng)的同時(shí)讓它右移，這時(shí)候球的顯示效果就是沿弧線運(yùn)動(dòng)

另外一種是旋轉(zhuǎn)元件，我們可以設(shè)置一個(gè)在對(duì)象之外的原點(diǎn)來(lái)作為它的旋轉(zhuǎn)中心。當(dāng)我們旋轉(zhuǎn)這個(gè)對(duì)象，它看上去就是沿著弧線運(yùn)動(dòng)。

<article><div></div><div></div></article>.sevenb .shape.a {animation: sevenb 3s infinite linear;top: calc(50% - 2em);left: calc(50% - 9em);transform-origin: 10em 50%; } .sevenb .shape.b {animation: sevenb 6s infinite linear reverse;background-color: yellow;width: 2em;height: 2em;left: calc(50% - 1em);top: calc(50% - 1em); }@keyframes sevenb {100% {transform: rotateZ(360deg);} }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

8、次要?jiǎng)幼?(Secondary Action)

雖然主動(dòng)畫(huà)正在發(fā)生，次要?jiǎng)幼骺梢栽鰪?qiáng)它的效果。這就好比某人在走路的時(shí)候擺動(dòng)手臂和傾斜腦袋，或者彈性球彈起的時(shí)候揚(yáng)起一些灰塵。

在網(wǎng)頁(yè)方面，當(dāng)主要焦點(diǎn)出現(xiàn)的時(shí)候就可以開(kāi)始執(zhí)行次要?jiǎng)幼?#xff0c;比如拖拽一個(gè)條目到列表中間。

<article><div></div><div></div><div></div></article>.eight .shape.a {transform: translateX(-6em);animation: eight-shape-a 4s cubic-bezier(.57,-0.5,.43,1.53) infinite; } .eight .shape.b {top: calc(50% + 6em);opacity: 0;animation: eight-shape-b 4s linear infinite; } .eight .shape.c {transform: translateX(6em);animation: eight-shape-c 4s cubic-bezier(.57,-0.5,.43,1.53) infinite; }@keyframes eight-shape-a {0%, 50% {transform: translateX(-5.5em);}70%, 100% {transform: translateX(-10em);} }@keyframes eight-shape-b {0% {transform: none;}20%, 30% {transform: translateY(-1.5em);opacity: 1;animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53);}32% {transform: translateY(-1.25em);opacity: 1;}34% {transform: translateY(-1.75em);opacity: 1;}36%, 38% {transform: translateY(-1.25em);opacity: 1;}42%, 60% {transform: translateY(-1.5em);opacity: 1;}75%, 100% {transform: translateY(-8em);opacity: 1;} }@keyframes eight-shape-c {0%, 50% {transform: translateX(5.5em);}70%, 100% {transform: translateX(10em);} }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

9、時(shí)間節(jié)奏 (Timing)

動(dòng)畫(huà)的時(shí)間節(jié)奏是需要多久去完成，它可以被用來(lái)讓看起來(lái)很重的對(duì)象做很重的動(dòng)畫(huà)，或者用在添加字符的動(dòng)畫(huà)中。

這在網(wǎng)頁(yè)上可能只要簡(jiǎn)單調(diào)整 animation-duration 或 transition-duration 值。

這很容易讓動(dòng)畫(huà)消耗更多時(shí)間，但調(diào)整時(shí)間節(jié)奏可以幫動(dòng)畫(huà)的內(nèi)容和交互方式變得更出眾。

<article> <div></div><div></div></article>.nine .shape.a {animation: nine 4s infinite cubic-bezier(.93,0,.67,1.21);left: calc(50% - 12em);transform-origin: 100% 6em; } .nine .shape.b {animation: nine 2s infinite cubic-bezier(1,-0.97,.23,1.84);left: calc(50% + 2em);transform-origin: 100% 100%; }@keyframes nine {0%, 10% {transform: translateX(0);}40%, 60% {transform: rotateZ(90deg);}90%, 100% {transform: translateX(0);} } .principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

10、夸張手法 (Exaggeration)

夸張手法在漫畫(huà)中是最常用來(lái)為某些動(dòng)作刻畫(huà)吸引力和增加戲劇性的，比如一只狼試圖把自己的喉嚨張得更開(kāi)地去咬東西可能會(huì)表現(xiàn)出更恐怖或者幽默的效果。

在網(wǎng)頁(yè)中，對(duì)象可以通過(guò)上下滑動(dòng)去強(qiáng)調(diào)和刻畫(huà)吸引力，比如在填充表單的時(shí)候生動(dòng)部分會(huì)比收縮和變淡的部分更突出。

<article><div></div></article>.ten .shape {animation: ten 4s infinite linear;transform-origin: 50% 8em;top: calc(50% - 6em); }@keyframes ten {0%, 10% {transform: none;animation-timing-function: cubic-bezier(.87,-1.05,.66,1.31);}40% {transform: rotateZ(-45deg) scale(2);animation-timing-function: cubic-bezier(.16,.54,0,1.38);}70%, 100% {transform: rotateZ(360deg) scale(1);} }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

11、扎實(shí)的描繪 (Solid drawing)

當(dāng)動(dòng)畫(huà)對(duì)象在三維中應(yīng)該加倍注意確保它們遵循透視原則。因?yàn)槿藗兞?xí)慣了生活在三維世界里，如果對(duì)象表現(xiàn)得與實(shí)際不符，會(huì)讓它看起來(lái)很糟糕。

如今瀏覽器對(duì)三維變換的支持已經(jīng)不錯(cuò)，這意味著我們可以在場(chǎng)景里旋轉(zhuǎn)和放置三維對(duì)象，瀏覽器能自動(dòng)控制它們的轉(zhuǎn)換。

<article><div><div><span></span><span></span><span></span><span></span><span></span><span></span></div></div></article>.eleven .shape {background: none;border: none;perspective: 400px;perspective-origin: center; } .eleven .shape .container {animation: eleven 4s infinite cubic-bezier(.6,-0.44,.37,1.44);transform-style: preserve-3d; } .eleven .shape span {display: block;position: absolute;opacity: 1;width: 4em;height: 4em;border: 1em solid #fff;background: #2d97db; } .eleven .shape span.front {transform: translateZ(3em); } .eleven .shape span.back {transform: translateZ(-3em); } .eleven .shape span.left {transform: rotateY(-90deg) translateZ(-3em); } .eleven .shape span.right {transform: rotateY(-90deg) translateZ(3em); } .eleven .shape span.top {transform: rotateX(-90deg) translateZ(-3em); } .eleven .shape span.bottom {transform: rotateX(-90deg) translateZ(3em); }@keyframes eleven {0% {opacity: 0;}10%, 40% {transform: none;opacity: 1;}60%, 75% {transform: rotateX(-20deg) rotateY(-45deg) translateY(4em);animation-timing-function: cubic-bezier(1,-0.05,.43,-0.16);opacity: 1;}100% {transform: translateZ(-180em) translateX(20em);opacity: 0;} }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

12、吸引力 (Appeal)

吸引力是藝術(shù)作品的特質(zhì)，讓我們與藝術(shù)家的想法連接起來(lái)。就像一個(gè)演員身上的魅力，是注重細(xì)節(jié)和動(dòng)作相結(jié)合而打造吸引性的結(jié)果。

精心制作網(wǎng)頁(yè)上的動(dòng)畫(huà)可以打造出吸引力，例如 Stripe 這樣的公司用了大量的動(dòng)畫(huà)去增加它們結(jié)賬流程的可靠性。

<article><div><div><span></span><span></span><span></span><span></span></div></div></article>.twelve .shape {background: none;border: none;perspective: 400px;perspective-origin: center; }.twelve .shape .container {animation: show-container 8s infinite cubic-bezier(.6,-0.44,.37,1.44);transform-style: preserve-3d;width: 4em;height: 4em;border: 1em solid #fff;background: #2d97db;position: relative; }.twelve .item {background-color: #1f7bb6;position: absolute; }.twelve .item.one {animation: show-text 8s 0.1s infinite ease-out;height: 6%;width: 30%;top: 15%;left: 25%; }.twelve .item.two {animation: show-text 8s 0.2s infinite ease-out;height: 6%;width: 20%;top: 30%;left: 25%; }.twelve .item.three {animation: show-text 8s 0.3s infinite ease-out;height: 6%;width: 50%;top: 45%;left: 25%; }.twelve .item.four {animation: show-button 8s infinite cubic-bezier(.64,-0.36,.1,1.43);height: 20%;width: 40%;top: 65%;left: 30%; }@keyframes show-container {0% {opacity: 0;transform: rotateX(-90deg);}10% {opacity: 1;transform: none;width: 4em;height: 4em;}15%, 90% {width: 12em;height: 12em;transform: translate(-4em, -4em);opacity: 1;}100% {opacity: 0;transform: rotateX(-90deg);width: 4em;height: 4em;} }@keyframes show-text {0%, 15% {transform: translateY(1em);opacity: 0;}20%, 85% {opacity: 1;transform: none;}88%, 100% {opacity: 0;transform: translateY(-1em);animation-timing-function: cubic-bezier(.64,-0.36,.1,1.43);} }@keyframes show-button {0%, 25% {transform: scale(0);opacity: 0;}35%, 80% {transform: none;opacity: 1;}90%, 100% {opacity: 0;transform: scale(0);} }.principle {width: 100%;height: 100vh;position: relative; }.shape {background: #2d97db;border: 1em solid #fff;width: 4em;height: 4em;position: absolute;top: calc(50% - 2em);left: calc(50% - 2em); }

感謝你的閱讀。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)

總結(jié)

以上是生活随笔為你收集整理的网页动画的12原则，帮你做出漂亮的动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。