講者: John Schlemmer.
請?jiān)?a target="_blank" rel="nofollow">這里觀看視頻持钉。
動(dòng)畫的作用：
（不僅僅是潤色）
- 引導(dǎo)注意力
- 包含層級
- 預(yù)告下一步動(dòng)作
- 減輕加載焦慮
- 潤色 + 驚喜感
動(dòng)畫時(shí)長
移動(dòng)端動(dòng)畫一般控制在 300 到 350 毫秒。但是針對不同的情況會(huì)有輕微的不同力试。例如毛仪，平板上動(dòng)畫一般在 400 到 450 毫秒，因?yàn)槠桨甯蠖苑啵\(yùn)動(dòng)距離更長。手表上動(dòng)畫一般控制在 150 到 200 毫秒之間装蓬。但是在 Web 端著拭，情況有所不同。人們對 web 的認(rèn)知是“應(yīng)當(dāng)更快”牍帚。這是因?yàn)闉g覽網(wǎng)頁的時(shí)候通常沒有頁面切換動(dòng)畫儡遮。通常的 Web 認(rèn)知是快速出現(xiàn)的，而非移動(dòng)端流暢的動(dòng)畫銜接暗赶。例如 Inbox鄙币，在 Web 端打開、關(guān)閉一封郵件的動(dòng)畫時(shí)長是 150 毫秒蹂随，而在手機(jī)上的動(dòng)畫速度是 300 毫秒十嘿。在這種情況下，雖然電腦的屏幕更大岳锁，但是動(dòng)畫時(shí)長反而更短绩衷。
列表動(dòng)畫
網(wǎng)格塊、列表依次出現(xiàn)的動(dòng)畫很常見激率，但是不要在前一個(gè)塊徹底出現(xiàn)之后再開始展現(xiàn)下一個(gè)塊咳燕。每一個(gè)塊的出現(xiàn)動(dòng)畫時(shí)長不要超過 20-25 毫秒。
網(wǎng)格的出現(xiàn)應(yīng)該是左上角至右下角直接出現(xiàn)的乒躺。并非一行一行出現(xiàn)招盲，因?yàn)檫@樣會(huì)引導(dǎo)用戶眼神呈 z 觀看 material，很不舒適嘉冒。
動(dòng)畫加速度
從畫面中的一點(diǎn)到另一點(diǎn)的動(dòng)畫加速度并不是對稱的曹货，如圖，加速的過程會(huì)比減速的過程快健爬，這樣的動(dòng)畫效果充滿活力控乾。
從畫面外進(jìn)入畫面的元素拋棄掉加速過程。在進(jìn)入畫面的時(shí)候模塊運(yùn)動(dòng)速度已經(jīng)很快娜遵，感覺不到在畫面外的加速過程蜕衡。因?yàn)橛脩粼谝獾氖切鲁霈F(xiàn)的模塊停留在哪里，而非從哪里來的。
動(dòng)畫軌跡
使用弧線移動(dòng)而非直線移動(dòng)的原因，是弧線運(yùn)動(dòng)讓人覺得更自然镰吆，不機(jī)械帘撰。
值得注意的是，軌跡不能重疊万皿。
引導(dǎo)作用
material 將其他的 material 推開后摧找，為當(dāng)前用戶選擇的 material 預(yù)留更大的空間。擠開 material 的動(dòng)畫讓用戶知道目前瀏覽的 material 是自己所點(diǎn)開的牢硅，達(dá)到引導(dǎo)作用蹬耘。
引導(dǎo)視覺的一個(gè)有效方法是保留一樣的元素。值得注意的是减余，在變化的時(shí)候综苔，這個(gè)“圓”的路徑是弧形，而非直線位岔。
優(yōu)秀動(dòng)畫使用
左圖為 inbox 郵箱如筛，當(dāng)郵件被清空，出現(xiàn)動(dòng)畫抒抬，使得用戶有動(dòng)力處理郵件杨刨；中間對 button 用動(dòng)畫做說明；右側(cè)掛掉的頁面使用動(dòng)畫讓用戶會(huì)心一笑瞧剖。
擴(kuò)展閱讀：
① Material Motion Guidelines
② Material Motion Google I/O 2016 視頻
③ Great Examples of Material Design Animations, by Beno?t Boucart
④ Google Design Website
⑤ Material Design Motion 宣傳短片（5 in total）
