隨著技術(shù)革新，市場上產(chǎn)品日益成熟，并且趨于同質(zhì)化，同時(shí)用戶對于產(chǎn)品細(xì)節(jié)的感知度和挑剔程度也日益劇增，越來越多的產(chǎn)品都在嘗試通過不同的手段來打造產(chǎn)品的差異化，故而動效設(shè)計(jì)越來越重要，從「錦上添花」慢慢變成了「必不可少」，變成了APP端和PC端標(biāo)配。
產(chǎn)品中的動效分三類
1. 情感化動效
情感化動效偏向于感性的層面，主要目的是增加我們產(chǎn)品的氣質(zhì)、傳達(dá)情緒，提升產(chǎn)品魅力，在一些小細(xì)節(jié)上加入情感化的元素也可以給用戶驚喜。比較常見的有應(yīng)用中的 loading 動畫、點(diǎn)贊動畫、運(yùn)營營銷動畫等。
2. 交互動效
展示的動效過場都可以算作交互動效設(shè)計(jì)。交互動效又可以細(xì)分為轉(zhuǎn)場動效和微交互，分別應(yīng)用于頁面銜接和基礎(chǔ)組件的交互反饋。前者可以傳達(dá)給用戶產(chǎn)品的層次結(jié)構(gòu)和空間關(guān)系，后者可以使用戶減少操作成本。
3. 復(fù)合型動效
復(fù)合型動效不局限于感性層面的情緒傳達(dá)，也不局限于交互行為的串聯(lián)，真實(shí)場景當(dāng)中最常用一類動效，對于設(shè)計(jì)師存在更多層面的挑戰(zhàn)性。
影響輸出方式的因素
一般情況下我們會根據(jù)動效的類型把輸出方式分為兩類：
所見即所得格式：輸出之后即可預(yù)覽的格式，比如 GIF 圖/視頻這類格式。
所見非所得格式：需要開發(fā)進(jìn)行還原才可以看到動畫效果的格式，比如lottie文件、標(biāo)注等格式。
常規(guī)動效會受到三個(gè)方面的影響，分別是尺寸、時(shí)間、動畫復(fù)雜度。
1. 動畫尺寸
對于常見所見即所得格式， 如gif/視頻/webp/apng ，動畫尺寸越大，占用系統(tǒng)空間越大，占用的系統(tǒng)性能也越大。另外，大尺寸的靜態(tài)圖在預(yù)覽過程中也需要耗費(fèi)更多的CPU。
2. 動畫時(shí)長
影響原因與尺寸的影響原因類似，當(dāng)圖片堆棧的時(shí)間變長時(shí)，堆棧當(dāng)中的圖片數(shù)量也會增加，動畫的占用內(nèi)存相應(yīng)的也就變得更大。所以，當(dāng)我們的動畫時(shí)間過長時(shí)也不適合使用這些所見即所得的格式類型。
但是，動畫的時(shí)長對性能的影響會相對的小很多。
3. 動畫復(fù)雜度
動畫復(fù)雜度對所見即所得格式的輸出格式當(dāng)中不存在任何問題，對所見非所得格式會增加開發(fā)成本。對于復(fù)雜動畫，我們要盡可能選擇輸出所見即所得的格式。當(dāng)選擇了所見非所得格式時(shí)也要盡可能的減少動畫的復(fù)雜度，保留重點(diǎn)，去掉冗雜的細(xì)節(jié)。
情感化動效輸出選擇
GIF 格式：1、對電腦的內(nèi)存和性能占用非常大；2、是有損的文件格式，不論是色彩還是畫面質(zhì)感都會有一定程度的壓縮；3、對透明通道的支持非常有限，輸出結(jié)果會非常差，時(shí)常會有鋸齒或白邊的情況。
視頻格式：視頻格式在大多數(shù)的產(chǎn)品上也都可以直接兼容，相比 GIF 格式它占用的內(nèi)存可以更小。它的問題是對透明通道的支持很差，并且也是一種有損的輸出格式。
APNG/WEBP：非常老的格式，也是最不容易出錯(cuò)的兩種格式，但是已經(jīng)無法滿足我們現(xiàn)在的動效需求。
GIF最多支持 8 位 256 色，色階過渡糟糕，圖片具有顆粒感/不支持 Alpha 透明通道，邊緣有雜邊
APNG支持 24 位真彩色圖片/支持 8 位 Alpha 透明通道/向下兼容 PNG
WebP比gif壓縮率和失真率都好，。但是現(xiàn)在制作WebP的工具寥寥無幾，更不用說動態(tài)WebP了，只能靠Google提供的命令行工具，但是對于批量圖片轉(zhuǎn)換，命令太長，著實(shí)不方便。
序列幀/精靈圖：
序列幀：是一個(gè)無損且低內(nèi)存的格式，但是他只能在客戶端環(huán)境中使用，不建議在 Web 環(huán)境中使用，因?yàn)樾蛄袔话愣际请S著 App 程序包一起下載下來的，但是 Web 中每次進(jìn)入一個(gè)新的網(wǎng)頁都需要重新下載。當(dāng)我們把所有序列合并在一張圖片上往往還是不夠的，我們還需要提供給開發(fā)具體哪個(gè)時(shí)間顯示哪一部分的具體參數(shù)。
精靈圖：將幾張較小的圖片放在一張大圖上。最早的時(shí)候網(wǎng)速十分有限，為了提升用戶體驗(yàn)，我們會將一張大圖分解成多張小圖來提高頁面打開速度，但是網(wǎng)速得到了提升，為了能夠讓服務(wù)器承載更多的請求，我們要減少瀏覽器對服務(wù)器的請求，最直接的方式，就是將多張較小的圖片放在一張大圖上，從而減輕服務(wù)器的壓力。而將多張小圖放到一張大圖上的操作就叫做精靈圖，也可以叫做雪碧技術(shù) 也叫做css sprit。我們可以直接通過 AE 插件 CSS Sprite Exporter（By Bigxixi）直接快速地輸出開發(fā)所需的代碼和精靈圖。
應(yīng)用案例：網(wǎng)易云音樂2017年終盤點(diǎn)
這個(gè) H5 案例主要是用 CSS 動畫來實(shí)現(xiàn)的，其中有很多小人的動畫，以及水波、沙漏等小元素是用精靈圖實(shí)現(xiàn)
Lottie ：Lottie是Airbnb開源的一個(gè)支持 Android、iOS 以及 ReactNative，利用json文件的方式快速實(shí)現(xiàn)動畫效果的庫。它的原理是把我們的各種矢量元素、位圖圖層以及他們的效果關(guān)鍵節(jié)點(diǎn)打包的形式行成一個(gè) json 格式的文件。開發(fā)人員拿到 json 格式是無法直接使用的，他需要在代碼中加入 Airbnb 提供的 Lottie 第三方庫來讀取播放，相當(dāng)于 lottie文件在各個(gè)端口設(shè)備上的播放器的作用，它會占用一定的系統(tǒng)空間，但是一般情況下也不會很大，從產(chǎn)品長遠(yuǎn)發(fā)展的角度來說肯定是可以給我們 App節(jié)省非常多空間的。總結(jié)來說，它不使用大量圖片，甚至零圖片，不占空間，不占內(nèi)存，不需要適配，且易于維護(hù)，簡單而且方便。
但是它有一些自問題，首先他對緩動曲線的解析會占用非常多的內(nèi)存，并且各平臺效果的支持都不是很穩(wěn)定，很多時(shí)候容易出 Bug。
AE2CSS（By Bigxixi）：AE 插件 CSS Sprite Exporter（By Bigxixi）可以幫助我們從 AE 當(dāng)中導(dǎo)出 CSS 格式，理論上這個(gè)插件可以支持我們所有的 AE 動畫，并且在大多數(shù)情況下動畫的質(zhì)量無損且占用內(nèi)存比所見即所得格式要小。
第三方動效庫：Lottie 目前在網(wǎng)上有非常多的開源動畫資源可以下載使用，可以讓我們以最低的成本獲得一些動畫效果。犸亮動畫平臺、lottie-editor、lottiefiles等網(wǎng)站都提供開源動畫資源。
交互動效&特殊效果輸出選擇
貝塞爾曲線：我們需要提供動畫的前后兩個(gè)狀態(tài)給到開發(fā)人員,每一個(gè)路徑的 svg 信息我們可以直接輸出給開發(fā)人員，像 Sketch/Zeplin 這樣的工具我們可以直接輸出 Web端所用的格式。事實(shí)上，往往設(shè)計(jì)者給到研發(fā)的動效預(yù)覽視頻，是不能讓研發(fā)準(zhǔn)確知道動畫中元素的運(yùn)動曲線規(guī)則的，而且由于動畫引擎不同的緣故，導(dǎo)致同樣的設(shè)計(jì)效果不同。不過，其中的貝塞爾插值和函數(shù)在開發(fā)過程中具有相當(dāng)?shù)慕梃b意義。也能很好的兼容Android/iOS/Web多平臺動效的實(shí)現(xiàn)。設(shè)計(jì)師做好動效之后，只需要把在制作動畫時(shí)使用的貝塞爾插值曲線參數(shù)值交給研發(fā)就可以，標(biāo)注動效的不同元素在不同時(shí)間所對應(yīng)的動畫運(yùn)動曲線參數(shù)。
這里還推薦另一款軟件──PaintCode 3。PaintCode 3 是一款專門為設(shè)計(jì)師準(zhǔn)備的簡單的矢量圖形繪圖軟件，通過 PaintCode3，即使沒有編程經(jīng)驗(yàn)，設(shè)計(jì)師也可以輸出適量圖形的 iOS/Web/Android 相應(yīng)的代碼。并且他跟 sketch之間有非常強(qiáng)的關(guān)聯(lián)性，可以直接復(fù)制 sketch 當(dāng)中的矢量形狀，也可以直接在軟件里編輯和新建矢量圖形，非常強(qiáng)大。（我還沒有嘗試，網(wǎng)上看到的）
緩動貝塞爾曲線：即我們在設(shè)計(jì)動效時(shí)使用的緩動曲線，他可以控制我們動效的速度緩急，可以直接控制我們動效的整體節(jié)奏感。他與我們的貝塞爾曲線非常類似，區(qū)別在于緩動貝塞爾曲線的兩個(gè)端點(diǎn)是固定的，而貝塞爾曲線的端點(diǎn)是動態(tài)的。也就是說當(dāng)我們與開發(fā)人員對接緩動曲線時(shí)，可以只提供兩個(gè)控制桿的位置。
為了獲得我們在 AE 當(dāng)中的緩動曲線的參數(shù)，我們可以以圖表左下角作為出發(fā)點(diǎn)，根據(jù)兩個(gè)控制桿的位置創(chuàng)建兩個(gè)矩形，以左側(cè)控制桿為基礎(chǔ)的矩形寬高（在整個(gè)區(qū)域?qū)捀咧械谋壤底鳛閿?shù)值）作為緩動曲線的前兩個(gè)數(shù)值，以右側(cè)控制桿為基礎(chǔ)的矩形寬高作為緩動曲線的后兩個(gè)數(shù)值。
雖然以上的方式可以使我們更方便地獲得 AE 緩動參數(shù)的具體數(shù)值，但是因?yàn)椴僮鞣爆嵵贿m用于我們已經(jīng)完成了動畫需要去落地的情況。更多的情況下我們需要在動畫設(shè)計(jì)之前就使用參數(shù)的方式去使用緩動曲線。Flow 插件可以幫助我們完成這件事，它可以幫助我們使用一般的緩動曲線的方式設(shè)計(jì)動畫，并且提供了幾十種在開發(fā)環(huán)境當(dāng)中常用的緩動類型。
正常情況建議還是使用一些默認(rèn)的緩動類型，原因有兩個(gè)方面，一方面是這樣默認(rèn)的曲線在算法上更容易計(jì)算，對系統(tǒng)性能的占用默認(rèn)也可以低一些，另一方面很多非系統(tǒng)默認(rèn)的緩動差值需要開發(fā)再去寫一遍，無形中也會增加我們的對接成本和后期的代碼維護(hù)成本。
推薦兩個(gè)網(wǎng)站，分別是 easings.net 和cubic-bezier.com，前者包含了最常見的曲線的列表，你可以將他們復(fù)制到你的原型工具中，第二個(gè)網(wǎng)站為你提供了不同曲線的參數(shù)，你可以直接在其中查看各種對象的移動效果。
插值器Interpolator
貝塞爾插值器CSS3 Bezier Curve Tester
貝塞爾曲線有它的公式，被寫在插值器里面。使用這種方法，設(shè)計(jì)師可以通過調(diào)節(jié)兩個(gè)把手就能得到豐富的細(xì)節(jié)表現(xiàn)。輸出給開發(fā)落地的標(biāo)注文檔也只需要提供這兩個(gè)把手的參數(shù)。
手動標(biāo)注：基于我們對貝塞爾曲線的理解和緩動曲線的理解，可以幫助我們在手動輸出標(biāo)注時(shí)有更豐富的選擇。手動標(biāo)注的情況下我們需要把動效中每一個(gè)具體元素的參數(shù)都參數(shù)化。一般情況下我們會把動畫的基礎(chǔ)單元分為以下幾個(gè)部分：
元素（在發(fā)生變化的元素）
屬性（元素發(fā)生變化的屬性）
參數(shù)（屬性發(fā)生的具體數(shù)值變化）
時(shí)間（變化的起始時(shí)間/持續(xù)時(shí)間）
差值（動畫的緩動曲線）
觸發(fā)事件
備注（其他說明）
有了這些基本的參數(shù)之后，我們可以參照下圖中的方式完整的表述我們的動畫過程給開發(fā)人員。
動效落地拓展──代碼
設(shè)計(jì)師在輸出動畫時(shí)更多的時(shí)間精力在于對動畫細(xì)節(jié)（緩動、時(shí)間等）的調(diào)整，而對于開發(fā)者來說有非常多的外部因素影響最終的輸出，一般情況下會有以下幾點(diǎn)：
1、開發(fā)者自身的水平
2、時(shí)間排期的影響
3、框架結(jié)構(gòu)、代碼語言限制
4、其他影響
推薦大家使用 html/css/js 的方式去構(gòu)建我們的動畫體系，或者直接從實(shí)際項(xiàng)目的代碼入手，可以通過一些簡單的代碼，去繪制一些基礎(chǔ)組件的動效，我們稱這種東西為腳手架，可以給我們所有的一些基礎(chǔ)元素做一些小動畫。
目前市面上也有一些針對設(shè)計(jì)師的代碼動效輸出工具，像 Origami / Framer，都是目前比較火熱的開發(fā)思維實(shí)現(xiàn)動效的產(chǎn)品，非常建議大家去嘗試使用。
曲線與時(shí)長
一、為某個(gè)特定項(xiàng)目整理部分細(xì)則
①劃定幾條默認(rèn)曲線：例如：show_curve_magnetic: 磁力感覺，模擬磁鐵吸附；show_curve_resistance: 斥力，模擬磁鐵靠近時(shí)相互排斥，并且減速停下；hide_curve: 加速離開
②劃定幾個(gè)時(shí)間梯度：150ms/240ms/360ms/540ms/700ms/1500ms/3000ms
③給出一些搭配方法：
icon、文字漸隱漸現(xiàn)：ease，150ms；
強(qiáng)彈出：show_curve_magnetic，根據(jù)對象的體積選擇時(shí)間梯度，推薦240ms；
弱彈出：show_curve_resistance，根據(jù)對象的體積選擇時(shí)間梯度，推薦 240ms；
屏幕范圍內(nèi)的位移：ease，根據(jù)對象的體積選擇時(shí)間梯度，推薦240ms；
移出屏幕外：hide_curve，根據(jù)對象的體積選擇時(shí)間梯度，推薦150ms（表示「拋棄」的動畫需要拋快一點(diǎn)，同時(shí)用戶對回退之后的頁面一般是有心理準(zhǔn)備的）；
黑色遮罩層出現(xiàn)：ease，時(shí)間長度配合界面其他元素；
黑色遮罩層消失：ease-out，時(shí)間長度配合界面其他元素；
呼吸循環(huán)類：ease-in-out，1500ms 或 3000ms；
二、觀看和使用存在區(qū)別
如果用 AE 這種輸出視頻的形式去調(diào)節(jié)曲線和時(shí)間，落地到軟件的實(shí)際體驗(yàn)很可能會顯得太拖沓。因?yàn)槿吮粍佑^看一個(gè)動態(tài)視頻的時(shí)候，注意力是相對渙散的。人可以容忍更多的延遲和過程展現(xiàn)。但是一旦人主動產(chǎn)生交互行為，注意力會相對集中。人變得很容易察覺到延遲的存在，也無法再忍受過多的、反復(fù)的過程展現(xiàn)。
三、系統(tǒng)本身存在的處理延遲
用戶對系統(tǒng)延遲的忍耐極限是非常短的。PC 上的忍耐極限可能是10秒以上，超過極限的話用戶大有可能會關(guān)閉這個(gè)應(yīng)用（或者網(wǎng)頁）而離開。而在智能手機(jī)上，這個(gè)極限大概就是4、5秒（反正我是這樣）。因?yàn)槭謾C(jī)上的界面幾乎都是獨(dú)占姿態(tài)。頁面停在這里，用戶沒法干其他事情，根本等不了太久。所以手機(jī)上延遲超過2秒的地方都建議使用 loading。
對于由用戶操作 直接觸發(fā) 的反饋，理想的響應(yīng)時(shí)間應(yīng)該控制在 100毫秒內(nèi)。
對于由用戶操作 間接觸發(fā) 的反饋，響應(yīng)時(shí)長可允許達(dá)到 1秒左右，不可 超過2秒 無反饋。
當(dāng) 超過2秒 才能獲取反饋結(jié)果時(shí)，須設(shè)計(jì)加載動效（loading）。
當(dāng)反饋時(shí)間為 2-9秒 時(shí)，可使用循環(huán)的加載樣式（如常見的菊花轉(zhuǎn)）。
當(dāng)反饋時(shí)間 超過10秒 時(shí)，須使用帶有進(jìn)度指示的加載樣式（如已加載了60%，還剩30秒）。
動效注意事項(xiàng)
1、UI動效中元素的運(yùn)動過程應(yīng)該是清晰的
2、列表項(xiàng)所使用的動效元素之間的延遲應(yīng)該控制在20~25毫秒之間
3、為了不讓動效看起來機(jī)械或者人工痕跡太明顯，元素的運(yùn)動應(yīng)該有漸進(jìn)加速和漸進(jìn)減速的特征，就像物理世界當(dāng)中其他的物體這樣
4、均勻的變化通常只會用在色彩的改變或者透明的改變上
5、編排有兩種不同的方式，一種是均等交互，另一種是從屬交互
均等交互意味著所有的元素和對象都遵循一個(gè)特定的編排的規(guī)則。從屬交互指的是使用一個(gè)中心對象作為主體，來吸引用戶的注意力，而其他的元素從屬于它來逐步呈現(xiàn)。
6、如果幾個(gè)不同的元素的運(yùn)動軌跡相交，那么他們不能彼此穿越
7、就目前來說，交互動效選擇 60幀/秒
APP動效與PC動效的區(qū)別
?1、動效的持續(xù)時(shí)長和速度
大量的研究表明，動效的最佳持續(xù)時(shí)長是200毫秒到500毫秒之間。任何低于100毫秒的動效對于人的眼睛而言，幾乎都是瞬間，很難被識別出來。而超過1秒的動效會讓人有遲滯感。動效的持續(xù)時(shí)長絕不是單純?nèi)Q于屏幕尺寸和運(yùn)動距離，還取決于平臺特征、元素大小、功能設(shè)定等等。較小的元素或者較小的變化，相應(yīng)的動效應(yīng)該更快一點(diǎn)。因此，大而復(fù)雜的元素動效持續(xù)時(shí)間更長，看起來也更舒服一點(diǎn)。
手機(jī)APP動效：動效時(shí)長應(yīng)該控制在200~300毫秒之間
平板電腦動效：比手機(jī)端延長大概30%，時(shí)長應(yīng)該在400~450毫秒之間。
PC端網(wǎng)頁端動效：相比于移動端中的動效速度，PC中的速度會快上一倍。動效的持續(xù)時(shí)長應(yīng)該在150~200毫秒之間。
PC端常用IM應(yīng)用動效分析
飛書
設(shè)置內(nèi)容滾動與日期滑動有加速效果
三角旋轉(zhuǎn)屬于微交互，基礎(chǔ)組件的交互反饋可以使用戶減少操作成本。
新手引號——有微弱活動和彈性震動（我沒有截到圖）
側(cè)欄左滑，轉(zhuǎn)場動效，具有彈性
tab切換有彈性
新建彈窗從右上角從小到大滑出放大，有彈性
點(diǎn)贊效果是情感化動效，運(yùn)用緩動曲線，有彈性
釘釘
釘釘?shù)膭有Х浅６啵瑤缀跛械牟僮鞫加蟹答仯械膭有Ф紡椥裕谐鎏帯Ｎ恼轮唤厝讉€(gè)具有代表性的動效。
由于篇幅限制，動效只上傳了PC端的飛書和釘釘。釘釘?shù)膭有н\(yùn)用非常廣泛，幾乎所有的操作，都給予反饋，不同模塊設(shè)計(jì)了不同形式的loading，一些小的彈窗 浮條都給了大小、位移、彈性的動效，給用戶很多驚喜。相比釘釘，飛書的動效較為克制，只在必要的場景下，幫助用戶理解轉(zhuǎn)場，安慰用戶等待的情況下，才出現(xiàn)動效，但是所有的動效也精心設(shè)計(jì)了緩動曲線，時(shí)常恰到好處。
參考文獻(xiàn)
歷時(shí)2個(gè)月，整理了這篇動效落地輸出指南！https://www.uisdc.com/dynamic-design-landing
動效輸出：用APNG代替GIF完美輸出動態(tài)效果https://www.zcool.com.cn/work/ZMjgyNjA2NjQ=.html
介紹一個(gè)導(dǎo)出CSS精靈圖動畫的AE腳本https://zhuanlan.zhihu.com/p/34731896
動效干貨——曲線和時(shí)長的一些控制思路https://www.zhihu.com/search?type=content&q=%E5%8A%A8%E6%95%88%E6%9B%B2%E7%BA%BF
動效的設(shè)計(jì)與實(shí)現(xiàn)-貝塞爾曲線動畫的插值法http://www.ui.cn/detail/277229.html
超全面！UI動效基本規(guī)則終極指南！https://mp.weixin.qq.com/s?__biz=MjM5MTg2NDA3MQ==&mid=2651891990&idx=1&sn=0450bd3dddb736a9adeb57da98d9b4d4&chksm=bd4b0d7e8a3c8468d2b60ee93d4a8abb3eb1ebd95d324d266ab255e95d5d170ac62b96da1a8c
動效干貨https://zhuanlan.zhihu.com/InteractiveAnimationRealshit
超全面！騰訊出品的交互微動效設(shè)計(jì)指南https://www.uisdc.com/guidelines-for-functional-animation
