一直以來，大家對于動效設(shè)計的熱情都是非常的高漲，也經(jīng)常在Dribbble之類的設(shè)計社區(qū)里看到各種“狂拽炫酷”的UI動效“神作”。
但是目前我們所看到的大多數(shù)動效貌似都成為了設(shè)計師們的自嗨。
在現(xiàn)在是個UI設(shè)計師都要會動效的年代，到底該如何讓自己的動效設(shè)計進(jìn)行有效的產(chǎn)出呢？這里結(jié)合我們團(tuán)隊的實戰(zhàn)工作經(jīng)驗，給大家進(jìn)行一些簡單的總結(jié)，希望能夠幫助還在動效設(shè)計里面掙扎的設(shè)計師們。
首先一個動效是否能夠落地實施，這里面牽扯了太多的因素。什么符合用戶體驗，尊重用戶習(xí)慣，提高交互效率，做好引導(dǎo)用戶等等等產(chǎn)品會給你一百個理由來“幫助”你打磨你的設(shè)計工作。當(dāng)你突破重重阻礙終于把各種需求都滿足了以后，開心的把你的demo拿到開發(fā)小哥哥們面前的時候，他們卻無情的給你扔出一句這個效果做不了，這是怎樣的一種酸爽我相信在看這篇文章的各位一定深有感觸。（廢話不多說了，文章內(nèi)容較長，請自備提神風(fēng)油精！）
UI動效分類
我們根據(jù)工作中的應(yīng)用場景把UI動效設(shè)計簡單分為以下4個場景：
1.矢量圖形動畫
2.場景動畫-情感化設(shè)計
3.特效類動畫
4.交互轉(zhuǎn)場
解決方案
針對于以上的四個常見應(yīng)用場景我們分別來展開說明對應(yīng)的解決方案。
1.針對于矢量路徑的動效場景,一般是牽扯到一些圖形的變化，線條的描邊動畫應(yīng)用較多就如下圖這些常見的矢量動畫場景
這幾個都是典型的矢量動畫應(yīng)用場景，面對此類動效，我們設(shè)計師產(chǎn)出的過程其實相對簡單，利用SVG格式的文檔進(jìn)行交接可以滿足大部分需求。那我這里我們就有必要了解一下SVG的一些特性了。SVG：Scalable Vector Graphics可縮放矢量圖形，用于描述二維矢量圖形的一種圖形格式。它具有以下特點：
1>可任意縮放：不會破壞圖像清晰度、細(xì)節(jié)。
2>文本獨立：圖像中的文字獨立于圖像，文字保留可編輯狀態(tài)。
3>節(jié)省資源：文件比gif和jpeg等常見圖片格式相比要小很多。
4>顯示效果強(qiáng)：圖像清晰度適合屏幕與打印的顯示需求。
5>顏色控制強(qiáng)：提供1600萬種顏色調(diào)色板。
具備了這些特性之后，就非常適合前段去進(jìn)行形變動畫之類的實施了。同時svg的css屬性前端更可以直接去表現(xiàn)一些樣式動畫，比如：利用fill和stroke可以給的的svg圖形創(chuàng)建顏色跟描邊，利用gradient屬性可以創(chuàng)建你想要的漸變等等（關(guān)于svg具體應(yīng)用層面介紹后期會補(bǔ)充SVG掃盲文章）。通過這些樣式屬性的設(shè)置開發(fā)人員便可實現(xiàn)一些類似于上面的描邊動畫。
了解了SVG的這么多特性已經(jīng)應(yīng)用性之后，我們在與前端進(jìn)行交接的時候產(chǎn)出的svg文檔也要盡量遵守幾個規(guī)則，下面是我們在應(yīng)用場景中總結(jié)的導(dǎo)svg文件時注意的幾點：
1>少圖層：盡量保證圖層整理，做到資源最優(yōu)，減少不必要圖層
2>合并路徑：盡可能的做到路徑閉合
3>避免圖層樣式：因為剛才看到svg里面其實是具備css樣式屬性的，所以在交接文檔中盡可能避免大量復(fù)雜的樣式設(shè)置。
4>這條是自己的習(xí)慣，盡可能用ai處理svg文件，目前觀察發(fā)現(xiàn)ai對于矢量文件的處理還是相對的干凈簡潔一些，相比于其他工具能省去一些不必要的調(diào)節(jié)。
那么其實除了svg之外，現(xiàn)在很多設(shè)計團(tuán)隊也在使用Airbnb的一個動效庫Lottie進(jìn)行動畫產(chǎn)出，這是一個可以安裝在AE里面直接導(dǎo)出動效json配置文件的插件。經(jīng)過測試，對于簡單的矢量形變類動效而言Lottie的導(dǎo)出效果還是不錯的，可以滿足大部狀況下的動畫場景，但是也有一些特殊場景難以勝任，比如遮罩里面的一些效果，ios平臺下的形狀運算等等效果不是很好。
附加一個Lottie的官方下載地址：https://github.com/airbnb/lottie-android
大家可以下載使用，關(guān)于使用教程網(wǎng)上有很多，這里就不做贅述了。
2.針對于情感化設(shè)計的應(yīng)用場景
以上一些場景都是一些典型的情感化設(shè)計場景，可以看到在這種類型的動效設(shè)計里面，動畫的表現(xiàn)形式相對比較夸張也比較自由，可以實現(xiàn)以下豐富的視覺效果，那這類相對復(fù)雜的動效格式如何實現(xiàn)呢？現(xiàn)在給出的基本方案有幾種：
序列幀，用AE導(dǎo)出png序列，開發(fā)在前端實現(xiàn)序列播放，案例為workup的一個開寶箱效果動畫：
導(dǎo)出文件如圖：
除此之外，也有直接使用視頻格式，或者gif圖片進(jìn)行文檔交接的。但是這些實現(xiàn)上面都會各有優(yōu)缺點，大家可以根據(jù)具體項目需求進(jìn)行方案選擇，比如視頻MP4是不支持透明的，但是實現(xiàn)方便，動畫質(zhì)量較高；gif格式圖片損失比較嚴(yán)重不支持半透明通道，通常透明圖片邊緣會有鋸齒，而且iOS是不支持gif格式的文件的，不過在一些不透明顏色較少的場景，特別是網(wǎng)頁端經(jīng)常使用。
3.特效類動效應(yīng)用場景
有些特殊場景我們可能因為視覺需要而表現(xiàn)一些特效類的動效展示，特別是在一些硬件應(yīng)用、工具類應(yīng)用以及數(shù)據(jù)可視化類的產(chǎn)品會有一些此類需求，這部分的動效實現(xiàn)方不牽扯數(shù)據(jù)的話也可以使用上文所說的序列幀或者視頻展示的方式，如果牽扯到數(shù)據(jù)的變化，一般會使用一些第三方的動效庫進(jìn)行實現(xiàn)，這里可以給大家推薦一些常用的第三方動效庫，供大家跟開發(fā)進(jìn)行協(xié)商交接，如圖：
iOS官方的動效API可以實現(xiàn)一些基礎(chǔ)動效。
部分第三方的一些動效庫推薦，不是官方維護(hù)，但是可以針對性的實現(xiàn)一些特殊效果，按照需求選擇（跟開發(fā)溝通對接）。
4.交互轉(zhuǎn)場類動效
這類動效的實現(xiàn)是我們UI交互里面常見的一些動效設(shè)計場景，這類動效的實現(xiàn)也相對比較麻煩，開發(fā)成本較高。優(yōu)秀的轉(zhuǎn)場動效能夠使交互變得流暢自然，提升產(chǎn)品的使用性。而轉(zhuǎn)場動畫的特殊性在于在交互的過程中會牽扯到數(shù)據(jù)變化，所以這類動效是不可能直接動過demo的方式進(jìn)行直接導(dǎo)出的，必須結(jié)合開發(fā)人員進(jìn)行數(shù)據(jù)與前端方面的交互。
業(yè)內(nèi)也會有一些產(chǎn)品采用懶加載的方式來避免轉(zhuǎn)場前后的違和感，但是不管怎樣此類的動效產(chǎn)出過程中基本上是需要配合我們設(shè)計師的標(biāo)注文檔進(jìn)行交接與描述的。
下圖是一個項目產(chǎn)出過程中的demo文檔：
上圖我們可以看出，在標(biāo)注的過程中我們需要跟前端講清楚幾個重要的參數(shù)，分別是：
1>觸發(fā)事件，這個交互事件的觸發(fā)條件（按下、長按、滑動、縮放等等）
2>變化元素，交互事件觸發(fā)后對用的運動元素是哪些
3>運動屬性，變化元素開始運動后所對應(yīng)的變化屬性（位移、縮放、旋轉(zhuǎn)、不透明度等等）
4>運動時間，觸發(fā)后元素變化所需要的時間
5>變化值，運動元素所對用的屬性，在當(dāng)此次交互事件所在的時間里數(shù)值的變化，一般是初始值跟結(jié)束值
6>運動規(guī)律，時間軸工具里一般是指緩動曲線（貝塞爾插值器）
7>其他備注，有些特殊場景的變化過程很難參數(shù)化描述，盡可能用文檔的形式把場景描述清楚
一般的標(biāo)注文檔通過這幾個屬性的備注以后，基本可以跟前端進(jìn)行交接了，在我們設(shè)計的過程中基本都是形象可見的，只有運動規(guī)律的描述好像顯得特別抽象，那如何讓我們的動效能夠跟設(shè)計demo一樣表現(xiàn)的自然流暢呢？這里就牽扯到運動曲線的標(biāo)注了，大家都知道設(shè)計師在使用的大部分時間軸工具里面都會有相關(guān)運動曲線的設(shè)置，拿AE為例，關(guān)鍵幀的緩動規(guī)律就是通過緩動曲線來影響的，那如何將抽象的緩動曲線具體參數(shù)化呢？這里我們有必要先來了解一下貝塞爾曲線的生成原理：
視頻來源@pnowelldesign
我們可以看到其實貝塞爾曲線的形狀跟曲線起點與終點的控制柄點有關(guān)，再具體一點兩個柄點的位置直接影響了曲線的形狀
那么這里就是我們所說的貝塞爾插值器，一張圖讓大家看明真相
這里可以清晰的感受到紫色與綠色的抦點在影響著曲線的形狀，右邊所對應(yīng)數(shù)值就是兩個抦點的位置參數(shù)，利用這些參數(shù)開發(fā)人員便可自定義插值器來實現(xiàn)設(shè)計師們創(chuàng)造的動效了。如何得到這個參數(shù)呢？
在線貝塞爾曲線插值器工具推薦：
http://www.css3beziercurve.net/
http://inloop.github.io/interpolator/
AE中實現(xiàn)曲線調(diào)節(jié)并且導(dǎo)出插值器參數(shù)的插件大家可以使用第三方插件flow
下載鏈接: https://pan.baidu.com/s/1eSInboA 密碼: hskd
同時強(qiáng)烈推薦Google設(shè)計團(tuán)隊開發(fā)的動效標(biāo)注導(dǎo)出插件：InspectorSpacetime
官方鏈接：https://google.github.io/inspectorspacetime/
文章所用方法均為團(tuán)隊內(nèi)部嘗試方法，并不全面，可作為大家工作產(chǎn)出過程中的參考方案，本次分享就到這里，關(guān)于具體的實現(xiàn)方法后期會有獨立的文章發(fā)布。
大家也可在下方回復(fù)自己的需求，共同學(xué)習(xí)。
結(jié)束語：盡量以人能聽懂的語氣將我們所嘗試的學(xué)習(xí)方法分享給大家，刻意避免使用貌似專業(yè)術(shù)語、名詞、論文觀點等，以免混淆視聽。一切以盡可能快速落地的方式分享我們的學(xué)習(xí)經(jīng)驗。作者博客禁止吹牛B，絕對低姿態(tài)，歡迎一起交流學(xué)習(xí)，碼字很累，望大家轉(zhuǎn)載注名一下出處~謝過！
