迷于設(shè)計，沉于動效洒放。由于筆者對動效交互很感興趣蛉鹿，遂著此文。希望能對大家有一點幫助拉馋。動圖較多榨为，建議 Wifi 下瀏覽。

內(nèi)容簡介：動效如今被廣泛的使用在界面設(shè)計中煌茴。但如何合理使用實效随闺，而不是讓動效干擾用戶，卻少有總結(jié)的經(jīng)驗蔓腐。因此本文旨在結(jié)合現(xiàn)有的動效資源和案例矩乐，總結(jié)一下動效的使用目的，使用場景以及實現(xiàn)技術(shù)回论。

文章結(jié)構(gòu)：

1. 現(xiàn)狀介紹
2. 動效使用歷史
3. 動效的使用目的
4. 動效使用場景
5. 使用動效的注意事項
6. 如何制作流暢的動效
7. 思考和展望
8. 參考文獻

現(xiàn)狀##

動畫作為一種娛樂方式散罕，被好萊塢的大神們已經(jīng)運用到了出神入化的地步。作為一個設(shè)計新人傀蓉，我主要關(guān)注如何運用動效在 UI 設(shè)計上欧漱，希望它也能夠給界面提升一些趣味性。

如今你可以在各種網(wǎng)站和 APP 上看到動效的身影葬燎。設(shè)計師想通過運動的物體來吸引用戶的注意力误甚，從而實現(xiàn)其目的。然而谱净，有些動效僅僅是為了好看而做窑邦，并沒有和界面的實際功能聯(lián)系起來，因此造成用戶的認知障礙壕探。如何將動效運用在合適的場景冈钦，以及如何制作流暢的動效成為了很多設(shè)計師思考的問題。

Distracting animation (from Internet)

動效使用歷史##

Haziwani 和 Berrand(2016) 總結(jié)到李请，在1970年左右瞧筛，用戶界面還只是一系列頭尾相連的 PDF厉熟，沒有任何的動效。直到喬幫主發(fā)布了發(fā)布了 Macintash(1984)驾窟，情況得到了一些改善庆猫。但是由于電腦畫面處理能力的限制，動效使用的十分有限绅络。隨著電腦性能的提升月培，越來越多的動效被使用到電腦和手機當中。

from Internet

到了2007年恩急，改變?nèi)祟惖漠a(chǎn)品 IPhone 問世了杉畜。它極大了顛覆了人們對電子設(shè)備體驗的感受。動效真正開始進入了每個人的日常生活衷恭。為什么大家都愛使用動效呢此叠？Cooper(2014) 解釋到，動效是一種強大的機制随珠，可以解釋和說明物體間的關(guān)系灭袁。這個機制在手持設(shè)備上尤其有用，因為手持設(shè)備的屏幕大小有限窗看，人們可以利用動效充分使用隱藏內(nèi)容的功效茸歧。轉(zhuǎn)場動效幫助用戶構(gòu)建了清晰的思維模式—新的內(nèi)容從哪來，新內(nèi)容和舊內(nèi)容之間的關(guān)系是什么显沈。動效在網(wǎng)站上的效果也非常好软瞎，它可以有效的引導(dǎo)用戶瀏覽界面。

動效的使用目的##

因為動效存在負面作用拉讯，合理的使用它變尤為重要涤浇。Cooper (2014) 提出動效需要謹慎的使用。過度的使用動效不僅讓人困惑和反感魔慷，而且讓人生理上不舒服只锭。比如蘋果的 IOS7，它過分強烈的視差效果讓很多用戶感到不舒服院尔。

交互動效的首要目標應(yīng)是支持和增強用戶在狀態(tài)間的轉(zhuǎn)化纹烹。Saffer(2013) 提出使用動效存在下列目的：

• 吸引用戶注意力在指定區(qū)域
• 表現(xiàn)對象和用戶操作間的關(guān)系
• 維持多窗口或多狀態(tài)的上下文關(guān)系
• 提供持續(xù)性事件的認知感
• 創(chuàng)造虛擬空間引導(dǎo)用戶在狀態(tài)和功能間轉(zhuǎn)化
• 創(chuàng)造沉浸感和趣味性 （每一個舉一個動圖例子）

Yalanska(2016) 也定義了 UI 動效的四項作用：

• 支持微交互
• 顯示運動過程
• 解釋
• 裝飾

Google 的 Material Design(2017), 提出在 MD 中，動效用來描述空間關(guān)系召边，功能，富有美感和流動性的目標裹驰。 動效顯示 APP 是如何組織的以及它能夠做什么隧熙，具體如下：

• 引導(dǎo)窗口切換
• 提示用戶接下來發(fā)生的事
• 對象間的層級感和空間感
• 減緩用戶對等待事件的認知
• 美感和個性化

綜上，筆者總結(jié)了交互動效的使用目的, SAFRI幻林，游獵法則（少了第二個A贞盯，原詞 SAFARI）

1.State, 告訴用戶對象和窗口的狀態(tài)是如何變化的

From Internet

當界面中對象狀態(tài)需要發(fā)生變化時音念，可以用動效展示變化的過程，讓用戶更清楚的感知到該變化躏敢。相應(yīng)的闷愤，當窗口發(fā)生變化時，可以用動效更清楚展示窗口是如何從一個狀態(tài)轉(zhuǎn)變到另一個狀態(tài)的件余。

2.Attention讥脐，吸引用戶注意力，告訴用戶做什么

From Internet

當你想讓用戶關(guān)注某一個區(qū)域啼器，或執(zhí)行某一個操作時旬渠，可以通過動效吸引他們的注意力。當用戶需要執(zhí)行操作時端壳，注意 UI 和動效的結(jié)合要能告知用戶需要進行的操作告丢。

3.Feedback, 告訴用戶操作和對象間的關(guān)系

From Internet

當用戶執(zhí)行了某一操作后，動效是一個非常好用的反饋機制损谦。通過動效的適當運用岖免，用戶可以清晰感知到自己操作的反饋，讓用戶知道自己做了什么照捡。

4.Relief, 緩解用戶對應(yīng)用處理速度的感知

From Internet

當應(yīng)用執(zhí)行一個長時間操作時颅湘，可以用動效緩解用戶對時間的感知，甚至創(chuàng)建一個假的動效效果（其實應(yīng)用并不用處理這么長時間）麻敌。當下許多 APP 下拉時的加載動效運用的便是該原理栅炒。對于用戶，他們關(guān)注的是感受到的速度术羔，而不是應(yīng)用實際消耗的速度赢赊。

5.Individuation, 讓產(chǎn)品更有趣和個性

From Internet

為了讓產(chǎn)品更有趣味性，可以在某些場合適當運用動效創(chuàng)造一些讓人愉悅的動畫效果级历。兩點是筆者覺得需要注意的释移，一是動效時間要足夠短，二是動效要足夠流暢寥殖。

需要說明的是玩讳，這些目的不是獨立存在的。設(shè)計師可以運用其中任意幾條去設(shè)計一個動效嚼贡。比如熏纯，兩個窗口間的切換動效不僅吸引了用戶的注意力，告訴用戶面板在切換了粤策。而且還告訴用戶兩個面板的位置和空間關(guān)系樟澜，上下，左右還是前后。

State + Attention + Feedback(from Internet)

State + Attention + Feedback + Individuation(from Internet)

喬幫主說過：“設(shè)計并不僅僅是它看到或感受到的樣子秩贰。設(shè)計應(yīng)該表現(xiàn)它怎么工作的霹俺。“筆者認為動效也是一樣的道理毒费，動效應(yīng)該它怎么工作的丙唧。設(shè)計動效時問自己1個問題，這個動效的目的是什么觅玻？

動效使用場景##

如果我們拆分動效到具體的使用場景想际，Cao(2015) 幫我們羅列了當今網(wǎng)頁設(shè)計中的10大使用場景，大部分場景也適用于手機應(yīng)用中：

1.滾動 Banner

from dribbble

2.表單

from dribbble

3.視覺中心

from dribbble

4.導(dǎo)航欄和菜單

from dribbble

5.轉(zhuǎn)場動效

from dribbble

6.背景動效

from dribbble

7.加載動效

from dribbble

8.滾動事件觸發(fā)的動效

from dribbble

9.鼠標 Hover 動效

from dribbble

10.圖片動效

from dribbble

使用動效的注意事項##

當我們制作交互動效的時候，有哪些事情是我們可以提前注意，或者有哪些標準可以用來評判是不是一個好動效狸相。Saffer(2013) 說到如果你做一件事可以不用動效，那盡量避免打瘪。從微信和 Facebook 這種全民 APP 在動效使用上自制不難看出。

其次傻昙，動效本身需要符合其傳達的意義闺骚。比如用戶上下滑動屏幕，窗口內(nèi)容就該上下變換妆档，而不是左右變換僻爽。僅僅為了動效而作動效是不可取的，交互動效需要盡可能解釋其本身含義贾惦。

2016年胸梆，Hazwani 和 Bernard(2016) 列出了4個讓動效具有意思的注意事項：

1. 概念轉(zhuǎn)換：不要獨立的設(shè)計界面布局和動效。設(shè)計它們的時候思考它們之間的聯(lián)系须板，如何它們之間轉(zhuǎn)化更自然碰镜，符合內(nèi)容的語義。
2. 解釋關(guān)系：每個元素都有其意義习瑰，狀態(tài)绪颖，位置等屬性。嘗試用動效反應(yīng)這些屬性間的關(guān)系甜奄。比如點擊一個按鈕柠横，如果會觸發(fā)一個面板。更好的效果是讓面板從按鈕處出現(xiàn)且漸入课兄，而不是讓面板直接漸入牍氛。
3. 唯一性：不要讓一個相同概念的元素在畫面中同時出現(xiàn)在2個地方。這會讓用戶對理解該元素的意義產(chǎn)生困惑烟阐。比如點擊小圖顯示大圖糜俗，小圖在大圖顯示的過程中依然出現(xiàn)在用戶視野內(nèi)。
4. 空間一致性：動效在空間上需要符合實際性。當一個元素從左側(cè)離開視線后悠抹，潛意識里你會預(yù)判它回來的方向也是從左側(cè)。

在 2015 澳大利亞的 CSS 峰會上扩淀， Cock(2015) 談到需要在實際開發(fā)中注意的四個基本 UI 動效原則：

1. Web 開發(fā)時多使用 opacity 和 transform properties 的組合楔敌，其他的屬性變化會導(dǎo)致 WEB 渲染變慢，影響體驗驻谆。筆者查閱了一下卵凑，更準確的是說，多使用 CSS3 中的 transfrom-3D 屬性胜臊，因為這些屬性會通過 GPU 硬件來處理勺卢，而不是通常處理網(wǎng)站的 CPU

2. 讓動效足夠快 （300ms 左右），提供給用戶視覺上的愉悅象对，而不是帶來延遲的觀感

3. 獨立的運動物體各個部分黑忱，這樣使整體動畫更豐富，不呆板

4. 使用自定義的動效函數(shù)勒魔，讓你的動效與眾不同

Material Design(2017) 也提出了4點原則：

1. 響應(yīng)：動效要快速響應(yīng)用戶的操作甫煞，移動設(shè)備上，長動畫大約在 300-400ms 之間冠绢，短動畫大約在 150-200ms 之間抚吠。
2. 自然：對于動效的運動狀態(tài)，要符合真實世界弟胀，因此要根據(jù)實際情況運用合適的 natural easing curves
3. 感知：運動的物體對周圍的物體會產(chǎn)生影響楷力，因此要考慮其周圍的環(huán)境
4. 目的：動效要具有目的性，傳達給用戶特性的信息

綜上孵户，筆者總結(jié)了簡短的3個原則：

1. 邏輯：動效是否符合客觀邏輯【響應(yīng)時間萧朝，方向，一致性延届，目的】
2. 時間：動效的時長是否合適 【視覺上感受良好】
3. 真實：動效是否反映了真實世界的運動規(guī)律 【慣性剪勿，緩入緩出】

如何制作流暢的動效##

筆者明白“紙上得來終覺淺，覺知此事要躬行”的意義方庭。于是收集完理論后厕吉，筆者便開始了對動效制作的探索。首先學(xué)習(xí)了迪士尼動畫師 Johnson 和 Thomas 的動畫圣經(jīng)—《The Illusion of Life: Disney Animation》其中的12條動畫設(shè)計原則：

1. 壓縮和拉伸（Squash & Stretch）
2. 預(yù)期感 (Anticipation)
3. 視覺中心 (Staging)
4. 一氣呵成和分批設(shè)計 （Straight ahead & Pose to pose）
5. 跟隨和重疊動作 （Follow through & Overlapping）
6. 緩入和緩出 （Slow in & Slow out）
7. 恍的睢（Arc）
8. 第二動作 （Second Animation）
9. 時間 (Timing)
10. 夸張 (Exaggeration)
11. 立體感 (Solid drawing)
12. 有趣 (Appeal)

這些原則雖然是針對動畫片的头朱，但是筆者在研究了它們后，按照自己的理解龄减，選出了可以運用到交互動畫制作的 9 條原則：

1. 時間和節(jié)奏：動畫的總時長和每幀動畫間的距離（先快后慢项钮，或先慢后快）
2. 緩入和緩出：符合現(xiàn)實世界規(guī)律，物體不能憑空運動和停止，有加速和減速過程
3. 預(yù)期感：給動畫添加一個反向動畫烁巫，讓動畫更突出署隘，更好的幫助用戶理解動畫
4. 壓縮和拉伸：制造視覺上的假想，突出效果
5. 谎窍丁：符合現(xiàn)實世界規(guī)律磁餐，少有純直線運動
6. 跟隨和重疊動作：輔物體會追隨主物體運動，且由于慣性阿弃，會有時間延遲
7. 第二動作：添加第二動作用于豐富第一動作
8. 夸張：讓動畫更具個性
9. 有趣：結(jié)合以上8點诊霹，傳遞給用戶一個有趣的印象

設(shè)計師可以靈活選擇其中的幾個原則進行自己的動效設(shè)計。筆者接下來使用 FramerJS 對 Cao 總結(jié)的 10 個 Web 場景針對手機制作動效渣淳，按照場景脾还，目的，制作入愧，評估的四步驟鄙漏，具體解釋如何綜合運用以上理論。

1

Banner

場景：Banner

目的：State, Attention, Individualization, Relief

制作：
筆者做的旋轉(zhuǎn) Banner, 主要用到了 Framer 的 PageComponent. 用定時器控制 Page 的切換砂客，和底部導(dǎo)航圓點樣式的切換泥张。需要掌握了簡單 coffeeScript 的語法即可。

細節(jié)優(yōu)化：

1. 添加一個加載按鈕的效果鞠值，讓用戶感受到還有多久切換到下一個 Banner媚创。技術(shù)上使用的是 CSS 的 background-image: linear-gradient 屬性。通過控制其投射角度彤恶，動態(tài)變化大小钞钙。
2. 時間上，24 frames/s 是一個適中的節(jié)奏声离。所以假定 2s 走完 360 度芒炼，則每 0.0417s 走完 7.5 度。實時刷新界面即可术徊。其次本刽，轉(zhuǎn)完一圈后的氣泡效果的時間為 0.3 左右，符合Material Design 對手持設(shè)備動效時間的要求赠涮。
3. Easing function上子寓，左滑動畫使用的是 ease-out, 又慢到快的劃出屏幕，符合實際笋除。圓的旋轉(zhuǎn)是 linear, 時間是均勻流動的斜友。
4. 動畫上的細節(jié)加在了氣泡上，氣泡是先縮小再放大垃它，縮小是為了給接下來的放大提供一個預(yù)判鲜屏，應(yīng)用了 Anticipation 原理烹看。其次是刻意夸張了縮小的效果，scale 0.5->0.1, opacity 0.1->1, 應(yīng)用了 Exaggeration 原理洛史」呤猓縮小時用的 easing function 是ease-in-out, 放大用的是 ease-out。符合客觀規(guī)律也殖。

評估：

1. 邏輯：符合一致性靠胜。該動效實現(xiàn)了四個動效目的。響應(yīng)時間還可以進一步優(yōu)化毕源。
2. 時間：采用 Material Design 標準，可根據(jù)實際情況進一步優(yōu)化
3. 真實：Easing Function 符合實際情況陕习■郑夸張部分動畫為了突出動效效果。氣泡破裂的感覺還可以進一步優(yōu)化该镣。

2

Form

場景：Form

目的：State, Attention, Feedback, Individualization

制作：
筆者做的 Form 表單效果, 模仿的 Google 登陸冻璃。使用的 PageComponent 控制頁面切換。由于 Framer 原聲不支持表單輸入控件损合，另外用到了 Github 上的一個 Input 插件模擬動態(tài)輸入效果

細節(jié)優(yōu)化：

1. 頭像添加一個背景色的改變省艳，也就是動態(tài)的導(dǎo)入用戶頭像，用到了 Scale 屬性嫁审。并同時把用戶的賬號顯示在頭像下方跋炕。
2. 按鈕添加 MouseDown 效果，監(jiān)聽用戶單機事件律适，當鼠標按下時辐烂，按鈕添加選中效果。鼠標放開時捂贿，效果消失纠修，返回原狀態(tài)。運用的是 Frame 的 State 變化機制厂僧。
3. Easing function上扣草，進入的效果都是 ease-out, 出去的效果都是 ease-in, 符合實際場景
4. 注意一下小圖標的觸摸區(qū)域，要保證其足夠大颜屠，很容易被手指點擊到辰妙。即返回圖標背后是有一塊更大的透明區(qū)域用來接收點擊事件汽纤。

評估：

1. 邏輯：符合方向的一致性。該動效實現(xiàn)了四個動效目的蕴坪。
2. 時間：采用 Material Design 標準敬锐，可根據(jù)實際情況進一步優(yōu)化
3. 真實：Easing Function 符合實際情況。個性化還可以再提升呆瞻，使其更有趣點。

3

Stage

場景：Stage

目的： Attention, Feedback, Relief, Individualization

制作：
筆者做的 Stage 點擊效果颤介，利用 boxShadow 的動態(tài)變化吸引用戶注意力使其點擊。然后使用 Svg 畫圓形赞赖，并使用 Utils.modulate 動態(tài)控制 stroke-dashoffset 的變化形成動態(tài)圓。最后提示界面出現(xiàn)前域。

細節(jié)優(yōu)化：

1. 點擊方塊后，添加了一個先放大移宅，再縮小的效果椿疗，運用了 Anticipation 的原理，使其更自然届榄。
2. 大方塊縮小后，添加了一個方塊像上移動同時變成圓的效果童擎，最后和圓的起點連接在一起攻晒，使動畫更整體，運用了 Second Animation 原理鲁捏。
3. Easing function上，進入的效果都是 ease-out, 出去的效果都是 ease-in, 圓使用的是 ease-out-in 給用戶一種加載時的動態(tài)感假丧，減少用戶等待知覺

評估：

1. 邏輯：該動效實現(xiàn)了四個動效目的动羽。
2. 時間：采用 Material Design 標準，可嘗試多一些選擇渴邦，看看有沒有更有趣的
3. 真實：Easing Function 符合實際情況∧彼螅可以多試一些 Custom 的 easing-functions

4

Menu

場景：Menu

目的： State, Attention, Feedback, Individualization

制作：
筆者做的 Menu 菜單效果信峻，利用 Rotate 屬性動效變化菜單按鈕的形狀給用戶反饋。菜單內(nèi)容是三個獨立的長方形瓮床，但是都是一個共同父元素的 Children, 方便通過父元素控制其整體移動盹舞。

細節(jié)優(yōu)化：

1. Icon 一開始是兩條橫線反方向旋轉(zhuǎn) 45 度形成 X, 后來利用 Exaggeration 原理使其同方向旋轉(zhuǎn)形成 90 夾角，所以第一條橫線旋轉(zhuǎn)了 145 度隘庄，看上去更有視覺效果踢步。
2. 菜單內(nèi)容出現(xiàn)后，添加了一個移動效果丑掺，需要保證其速度足夠快，不會讓用戶等待吼鱼，同時增加了動畫的趣味性菇肃。
3. Easing function上取募，菜單按鈕使用了 Spring 緩動，使其有彈性的感覺斗忌，增加趣味性旺聚。菜單進入的效果是 ease-out, 出去 ease-in, 出現(xiàn)后移動的效果是 ease-in-out

評估：

1. 邏輯：該動效實現(xiàn)了四個動效目的砰粹。
2. 時間：采用 Material Design 標準，保證其足夠短弄痹。
3. 真實：Easing Function 符合實際情況嵌器。長方形的分離爽航，采用了 Material Design 標準乾忱。

5

Transition

場景: Transition

目的： State, Attention, Feedback, Individualization

制作：
筆者做的 Transition 效果饭耳，通過控制元素 x 位置和 Scale 屬性执解，形成轉(zhuǎn)場效果。

細節(jié)優(yōu)化：

1. 點擊按鈕后新蟆，按鈕動態(tài)旋轉(zhuǎn)并逐漸放大消失右蕊，控制其與新內(nèi)容同時移動饶囚，營造新內(nèi)容是由按鈕產(chǎn)生的視覺錯覺，運用了 Follow through 理論嘀掸。
2. 增加了點擊后的 Ripple 效果规惰，用于給用戶即使反饋歇万。
3. Easing function上，進入的效果是 ease-out, 出去 ease-in硫兰。同時出去的時間要短于進入的寒锚，不重要的事件減少其用戶等待時間。

評估：

1. 邏輯：該動效實現(xiàn)了四個動效目的苏研。
2. 時間：采用 Material Design 標準腮郊，保證其足夠短轧飞。
3. 真實：Easing Function 符合實際情況撒踪≈仆可以多試試一些別的趣味性效果泵三，比如熱氣球的上浮感。

6

Background

場景: Background

目的：Attention, Individualization

制作：
筆者做的 Background 效果俺抽，通過控制三層元素的 x 的位置磷斧，設(shè)置不同的速率捷犹，產(chǎn)生視差滾動的效果。反復(fù)執(zhí)行動畫即可孩哑。

細節(jié)優(yōu)化：

1. 近大遠小，近實遠虛胳蛮，近快遠慢仅炊。
2. Easing function上，模擬上浮的效果蜕窿，先慢后快呆馁。

評估：

1. 邏輯：該動效實現(xiàn)了兩個動效目的浙滤。在手機端筆者不建議使用 Background 效果，手機更注重快捷性畔咧，其屏幕大小有限，這種全屏動畫占了手機屏幕所有空間梅桩，干擾更為重要的內(nèi)容呈現(xiàn)拜隧。
2. 時間：時間過長虹蓄，更偏向視覺效果，而不是交互外臂。
3. 真實：如果是純視覺效果律胀，可以再添加一個氣泡上升到頂部爆炸的效果炭菌。不過這種效果最好用 AE 做，再轉(zhuǎn)成 gif 了赘艳，不太適合用 Layer 來模擬克握。

7

Loading

場景: Loading

目的： Attention, Relief, Individualization

制作：
筆者做的 Loading 效果菩暗，通過三角函數(shù)控制元素 x 位置和 y 位置，形成蝴蝶結(jié)路徑效果旷坦。公式

x = midX + maxX * math.sin(二倍周期)
y = midY + maxY * math.sin(一倍周期)

注意佑稠，x 的周期保證為 y 周期的2倍舌胶，這樣保證了 x 完成一圈的時候，y 完成了兩圈漱办，動態(tài)就成了蝴蝶結(jié)的形狀。

細節(jié)優(yōu)化：

1. 增加了一個方向相反的圓暇屋，兩個圓的移動更有 Loading 的感覺
2. 當 2 個圓相遇時洞辣，動態(tài)改變其顏色扬霜，使動畫更加有趣
3. Easing function 這里用的是 Utils.interval 按照固定時間間隔進行變化的，因為軟件不支持原生曲線運動联予，屬于線性變化材原。

評估：

1. 邏輯：該動效實現(xiàn)了三個動效目的余蟹。
2. 時間：相對于最終的三角函數(shù)，時間上可以具體調(diào)試時改動窑睁。
3. 真實：Easing Function 有待提高葵孤，現(xiàn)在只是線性佛呻，最好能模擬出中心具有引力的感覺病线，越距離中心越快送挑，越遠越慢。

8

Scrolling

場景：Scrolling

目的：State, Attention, Feedback, Individualization

制作：
筆者做的滾動出發(fā)卡片式折疊纺裁，模仿的“得到”APP欺缘。藍色卡片分成上下兩部分，然后拼合在一起丧鸯。利用 CSS 的 RotationX 屬性分別控制其旋轉(zhuǎn)的角度嫩絮。然后監(jiān)聽 Scrolling 事件剿干，根據(jù)上滑，下滑的距離杠步，動態(tài)控制 RotationX 實現(xiàn)其效果撰洗。

細節(jié)優(yōu)化：

1. 假定光都從上方照下差导，當卡片折疊時，會產(chǎn)生陰影颠蕴，且上方陰影會比下方更重助析。所以筆者給上層和下層卡片分別加了一層動態(tài)變化的陰影外冀。
2. 由于現(xiàn)實世界的透視，近大遠小西轩，筆者利用 CSS 的 Perspective 屬性使卡片具有該效果藕畔。
3. 該動效屬于實時響應(yīng)庄拇，動效要對應(yīng)操作韭邓，使其更具控制感女淑，筆者沒有考慮緩入和緩出動畫效果（減少用戶認知的干擾）可很，使用的 Framer 內(nèi)置的 Utils.modulate() 映射函數(shù)直接在 Scrolling 距離和卡片的 RotationX 上做的映射我抠。

評估：

1. 邏輯：實時響應(yīng)，陰影瓣窄，符合客觀概率俺夕。該動效實現(xiàn)了 4 個動效目的贱鄙。對 Perspective 屬性還有待進一步研究，讓透視看起來更逼真（透視大小映九，物體大小件甥，人眼距離相匹配）哼拔。
2. 時間：角度和距離直接映射倦逐，操作時視覺上感受良好。
3. 真實：對真實世界運用規(guī)律的反映有待進一步加強（慣性）曾我〈┟卡片折痕處的效果還可以進一步優(yōu)化荞雏，數(shù)學(xué)上研究一下三角函數(shù)，盡量準確計算出旋轉(zhuǎn)角度和位移的關(guān)系悦陋。

9

Hover

場景：Hover

目的：State, Attention, Feedback, Individualization

制作：
筆者做的 LongPress 效果俺驶，因為手機場景并沒有瀏覽器中的 Hover棍辕，所以筆者用了長按場景楚昭。主要還是 位置，透明度塘幅，大小 等屬性的結(jié)合生成的效果电媳。

細節(jié)優(yōu)化：

1. 愛心在縮小前庆亡，運用 Anticipation 原理先放大一點身冀，讓動畫更流暢
2. 點贊 Icon 和 數(shù)字的動態(tài)變化，讓動效更具個性化
3. 實時相應(yīng)的部分使用 linear 函數(shù)搂根，進入先快后慢，退出先慢后快

評估：

1. 邏輯：反饋符合認知剩愧，用戶能理解長按所具有的意義仁卷。實現(xiàn)了 4 個目的
2. 時間：采用 Material Design 標準，保證其足夠短芒帕。
3. 真實：愛心的填充效果還可以優(yōu)化成從底部上漲到頂部背蟆，更符合認知。這里受限于我沒有找到 Framer 使用 Mask 的方法志珍，沒辦法讓愛心形狀成為填充層的蒙板垛叨，所以改成了從中心擴線嗽元，以后學(xué)會了再改正。

10

Image

場景：Image

目的：Attention, Individualization

制作：
筆者做的 Image 動畫载慈。兩個圖片層办铡，循環(huán)滾動琳要。把云朵層單獨提取出來稚补，通過位置上的控制童叠，使其在指定時間產(chǎn)生移動的效果。

細節(jié)優(yōu)化：

1. 如果使用圖片動畫课幕，插畫的質(zhì)量要保證足夠好厦坛。顏色，漸變的使用符合常識乍惊。注意高光杜秸，陰影润绎，漸變方向等細節(jié)撬碟。
2. 添加了云層的移動，使2個動畫圖片之間產(chǎn)生了聯(lián)系莉撇，有一種時間上的過度感呢蛤，從白晝到黑夜。

評估：

1. 邏輯：符合生活常識棍郎。實現(xiàn)了 2 個目的其障，個人還是不建議在手機使用圖片效果，交互目的偏少涂佃，且需要消耗大量帶寬励翼。
2. 時間：時間略長粮揉，可以設(shè)計一些時間短且有趣的圖片動畫。
3. 真實：由于 Framer 不太適合制作純視覺上的動效抚笔，多圖層同時動畫很容易導(dǎo)致瀏覽器渲染產(chǎn)生問題，動畫看起來很抖動侨拦。這里的云層（只是個圖片圖層）只做了一個移動殊橙，更真實的可以做一個抖動效果。不過那樣我覺的更適合使用 AE 制作成 Gif 再導(dǎo)出狱从。但 Gif 會存在質(zhì)量偏低的問題膨蛮。使用 Svg 和 Canvas 技術(shù)來制作復(fù)雜的 Web 動效是更明智的選擇。

感想##

1.做動效之前季研，先把靜態(tài)稿做出來敞葛，便于條理的梳理，樣式的統(tǒng)一与涡。磨刀不誤砍柴工嘛惹谐。并且像 Framer 這種支持直接導(dǎo)入 Sketch 文件的軟件，僅作為展示時（不考慮文件大型章簟）氨肌，盡可以直接使用圖片作為圖層，省去了自己寫css的時間酌畜。

Sketch static images

2.由于 Photoshop 轉(zhuǎn) Gif 的能力有限怎囚，做動效時（如果要導(dǎo)出 Gif), 不要使用特別復(fù)雜的漸變，同時保證圖片大小不要長寬別超過 800px桥胞。轉(zhuǎn) Gif 時恳守，Gif 的抖動值選擇在圖片大小和圖片清晰度之間做一個平衡即可。筆者一般直接開 4 聯(lián)看效果贩虾，然后選擇一個合適的催烘，前提是你的電腦內(nèi)存足夠大，不然會很卡缎罢。

Save for Web as gif

3.再耐心多一點颗圣，再多思考一點。筆者交互設(shè)計才入門屁使，還有很多不足在岂。動畫部分會持續(xù)完善更新，也歡迎各位童鞋與我多多交流蛮寂，共同進步蔽午。

Feel free to contact me

其他##

Framer-Animations-for-10-Mobile-Interaction-Situations Github Address

參考資料##

• Cao, J. (2015, June 23). The changing face of animation & interaction design.Retrieved February 28, 2017, from https://thenextweb.com/dd/2015/06/23/the-changing-face-of-animation-interaction-design
• Cock, D. B. (2015, June 15). Lets move! Retrieved February 28, 2017, from https://www.youtube.com/watch?v=J6wUmQDQBkw&feature=youtu.be
• Cone, J. (2015, July 06). User interface design: Why motion matters (para. 4). Retrieved February 28, 2017, from http://motionographer.com/2015/07/06/user-interface-design-why-motion-matters/
• Cooper, A. (2014). About face: The essentials of interaction design (p. 266–267). Hoboken, NJ: John Wiley & Sons.
• Google. (2017) Material motion. Retrieved February 28, 2017, from https://material.io/guidelines/motion/material-motion.html
• Hazwani, A. A., & Bernard, T. (2016, January 18). Motion with Meaning: Semantic Animation in Interface Design (para. 11). Retrieved February 27, 2017, from https://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design
• Johnston, O., & Thomas, F. (1981). The illusion of life: Disney animation (pp. 47–69). New York: Disney Editions.
• Kumar, V. (2013). 101 design methods: A structured approach for driving innovation in your organization. Hoboken, N.J: Wiley.* Saffer, D. (2013). Microinteractions (pp. 98–99). Sebastapol, CA: O'Reilly.
• Steve Jobs. (2003) (n.d.). Retrieved February 28, 2017, from https://en.wikiquote.org/wiki/Steve_Jobs
• Yalanska, M. (2016, June 29). Interface animation. The Force of Motion. Retrieved February 28, 2017, from https://tubikstudio.com/interface-animation-the-force-of-motion/