小編：動效已經成為UI行業里流行的趨勢了，特別是游戲APP、短視頻分享和直播類的APP或多或少都會有動效這樣的元素。本文將來分享一些作者過往在動效設計過程中的基礎知識沉淀，主要集中于探討動效設計原則和運用的內容。
前言
前人已經總結了讓動畫生動的技巧，早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則，該法則也是受用至今。法則雖是針對傳統動畫而制定，但對于我們日常需求中所接觸的動效/動畫需求也同樣受用。
目錄
這次分享分為三個內容，第一個是介紹一下動畫設計的“十二大原則”是什么？；第二部分是結合幾個案例說明如何將這些原則運用到具體的項目中去的。最后就是動效設計流程的一個總結。
【1】動畫設計技巧
如上圖；動畫的十二大原則又可以拆分為兩類，動畫設計技巧和動畫表現技巧。
第一部分設計技巧是增添動畫細節的方法，可以用這些原則讓動畫更有細節更生動。
第二部分表現技巧是提升整個動畫在畫面中全局表現力的，這個主要是多用在動畫里。
在產品動效設計中還是常用到設計技巧，所以這次著重分享設計技巧這一部分。
01 擠壓和拉伸
【擠壓和拉伸】是動效設計中最常用到的設計技巧。使用擠壓和拉伸來強調物體的質感、重量、速度。我們可以根據物體的質感去決定擠壓伸展的具體幅度。可以很好的表達出不同物體的不同質感。這里需要注意的是，物體擠壓拉伸的面積盡可能保持視覺統一。以免動畫前后造成不協調。
02 預期動作
【預期動作】可讓用戶感知到該物體即將發生運動，以及具體運動的方式和方向。讓用戶對動畫效果有一個提前的預判不會太突兀。也可以根據預期動作去引導用戶的視線。比如起跳時雙腿先要彎曲，踢球向前射門時腿要向后擺動。所以在動效設計中我們運用好預期動作會讓用戶做好心理準備，讓這個動畫更加真實。
03 跟隨與重疊動作
【跟隨與重疊動作】這個技巧也是表達運動速度和物體質感的重要技巧之一。
跟隨簡單說舉個例子就是揮棒球棒，棒球棒是手帶動棒球棒轉動，當手停止發力時，棒球棒不會立刻停止，會隨著發力的方向擺動減幅，直到完全停止。擺動的幅度和持續時間會根據不同的力量及速度進行相應的調整。
重疊動作就是想象棒球棒如果是橡膠材質的，那么揮舞棒球的時候就會有一定程度的彎曲，所以速度越快，材質越軟，彎曲程度也會越大。
04 緩動速度曲線
【緩動速度曲線】動效設計中最離不開的參數。不同的速度曲線也會給人不一樣的感受，運動曲線較陡會感覺元素的質量更重沖擊感更強，比如適用于我們競爭向的場景中。反之較平緩的曲線元素運動則較為輕盈。更適用于我們關系向的場景。
05 控制時間偏差
【控制時間偏差】運動物體的主要運動和附屬運動不會同時發生，用時間偏差，會讓動畫更加真實自然。也可避免動效過程出現空檔期，或者一次性出現過多的元素，增加認知負荷。信息離場時則需要快速高效，不需要人為的制造信息偏差。
06 弧形運動軌跡
【弧形運動軌跡】當自然運動的物體運動時都會受到引力的影響，簡單解釋就是速度越快弧線越平滑，移動距離越遠。速度越慢弧線越彎曲，移動距離也越近。
【2】結合案例應用
下面就舉幾個案例，這些原則在具體工作中的應用。
01福袋：短觸區引導動畫
這個是直播間福袋倒計時五秒開獎時播放的動畫，目標是為了告訴用戶福袋即將開獎，同時在這五秒內拉升福袋的價值感，提高福袋的參與率。
確定好動效的目標后，就要圍繞這個目標對動畫進行拆解。
- 【第一步】是預備動作，在進行主要的動畫之前需要有一個較強的視覺引導，讓用戶提前注意到福袋接下來會會有動作發生，這里采用的方式是抖動。
- 【第二步】是體現價值感，這里采用的是金色粒子加發光的效果。
- 【第三步】倒計時結束福袋準備離場。
動畫步驟拆解完后就分析每一步動畫需要用到的動畫原則。比如第一步的抖動引起用戶注意的同時下一步就需要噴出粒子，所以在抖動的這一步就要增加一個預期動作。在這里設計了兩個預期動作：一個是粒子向右上角噴出，所以預期動作設計成向左下角提前移動收起，同時給下一步的粒子動畫留出足夠的空間出現。第二個是收緊口袋，為下一步的打開做準備。
然后福袋的繩子也會跟著福袋運動，這里用到了“跟隨與重疊動作”和“附屬運動”，因為繩子材質比較軟，所以抖動頻率和幅度設計的時候都會相應的增加一些。
第二步動畫當福袋打開時有一個“擠壓和拉伸”的效果，一個是為了表現福袋的材質，再一個是為了體現福袋突然打開的速度感。
最后一步就是噴完粒子后的消失動畫，這里加了一個位置移動的‘預期動作。然后在配合速率較快的緩動曲線最后完成 消失。
可以看一下運用動畫原則之前和之后的對比，這個沒有用動畫原則的案例會有明顯的頓挫感，整體動畫不夠自然，就會顯得動畫呆呆的。嗯。那這個用了動畫原則之后整體動畫會顯得比較流暢，中間也沒有空檔期。這里說一下，基本上每個動畫都會用到前面說的時間偏差控制來調整節奏，所以就沒有在案例里單獨列出來。
02. 盲盒：盲盒游戲引導入口動畫
先拆解動畫，再分析需要運用到的動畫原則。這里主要說下不同點，第二步中用到了“弧形運動”的原則。‘盲盒噴出的彩帶和星星會有‘不同的’速度，速度快的元素運動的路徑會比速度慢的更平滑一些。
03. 拼圖：拼圖游戲引導入口動畫
由于拼圖本身造型比較單一，材質也相對偏硬。所以不好在拼圖本身上去做動畫。然后這里處理的方式是利用光感帶出一個縮放的效果來進行視覺上的引導。這里同樣控制了時間的偏差。先通過光感帶動拼圖禮物放大提供一個拍下去的預期動作。然后拍下去的同時掃光到邊緣處立刻釋放粒子，達到視覺上的同步。
04. 段位勛章 降段動畫
這個案例是段位勛章的降段動畫，前幾個例子中動畫的元素材質都偏軟。所以這個案例主要是想對比一下材質比較硬的表現樣式。
最后就簡單總結一下動效設計的方法。一共拆解為四步，首先確定好需求方的目標和預期。然后再進行具體的腳本步驟的拆分，然后再聚焦到每一步需要用的的動畫原則。最后再開始動效設計。設計前對需求進行充分的思考，讓動效在助理業務發展的同時也能夠做到有理有據。
作者：HEBBEN軒
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務