1.情感動(dòng)畫

情感動(dòng)畫往往更偏向于情感化，其主要目的是提升產(chǎn)品的氣質(zhì)，傳達(dá)情感，增加產(chǎn)品的魅力。我們也可以通過一些彩蛋的形式，在一些小細(xì)節(jié)中加入一些情感元素，給用戶帶來驚喜。常見的例子有APP內(nèi)的動(dòng)畫，點(diǎn)贊動(dòng)畫等。

2.交互式動(dòng)畫

產(chǎn)品流程與交互行為的銜接，無論是可以實(shí)際操作的交互原型，還是純粹用于演示展示的動(dòng)態(tài)轉(zhuǎn)場(chǎng)，都可以視為交互動(dòng)效設(shè)計(jì)。交互動(dòng)效最基本的形式就是原型流程圖的銜接。

交互特效又可以分為轉(zhuǎn)場(chǎng)特效和微交互，分別應(yīng)用于頁面銜接和基礎(chǔ)組件的交互反饋，前者可以向用戶傳達(dá)產(chǎn)品的層級(jí)結(jié)構(gòu)和空間關(guān)系，后者可以降低用戶的操作成本。

3. 合成動(dòng)畫

復(fù)雜的動(dòng)效并不局限于感知層面的情感傳達(dá)，也不局限于交互行為的串聯(lián)，這類動(dòng)效往往在現(xiàn)實(shí)場(chǎng)景中更為常見，與開發(fā)者交互時(shí)也存在更多不穩(wěn)定因素，對(duì)設(shè)計(jì)師的挑戰(zhàn)更大。

影響產(chǎn)出的因素

影響產(chǎn)出的因素

情感動(dòng)畫一般受大小、時(shí)間和動(dòng)畫復(fù)雜度三個(gè)屬性影響：

1.動(dòng)畫大小

動(dòng)畫尺寸越大=占用系統(tǒng)空間越大=占用系統(tǒng)性能越大，但是這個(gè)等式只適用于一些常見的所見即所得格式，例如gif/video/webp/apng等。

這類格式是我們的設(shè)備能夠接受的最簡(jiǎn)單、最直接的格式。制作動(dòng)畫的邏輯通常是將不同的靜態(tài)圖像堆疊在一起，按照給定的順序和時(shí)間逐張播放。

每張靜態(tài)合成圖的尺寸越大，整個(gè)動(dòng)畫占用的內(nèi)存就越大，但我們的產(chǎn)品包容量永遠(yuǎn)是有限的，不能允許占用過多內(nèi)存的動(dòng)畫存在。

另一方面，大尺寸靜態(tài)圖片在預(yù)覽過程中也需要更多的設(shè)備計(jì)算。舉一個(gè)很簡(jiǎn)單的例子，當(dāng)我們?cè)陔娔X上預(yù)覽一張800*600的圖片和一張2400*1800的圖片時(shí)，電腦打開它們所需的時(shí)間是不一樣的。相應(yīng)的，在預(yù)覽多張動(dòng)畫格式的大尺寸靜態(tài)圖片時(shí)消耗的系統(tǒng)性能也會(huì)成倍增加。

2.動(dòng)畫時(shí)長(zhǎng)

影響的原因和大小類似，當(dāng)圖片入棧時(shí)間變長(zhǎng)時(shí)，棧內(nèi)圖片的數(shù)量也會(huì)變多sketch怎么合并圖層，動(dòng)畫占用的內(nèi)存也會(huì)相應(yīng)變大。

所以當(dāng)我們的動(dòng)畫時(shí)間太長(zhǎng)的時(shí)候就不適合使用這些格式類型。

需要注意的一點(diǎn)是動(dòng)畫的持續(xù)時(shí)間對(duì)性能的影響相對(duì)較小。

3.動(dòng)畫復(fù)雜性

動(dòng)畫的復(fù)雜度在以上幾種輸出格式中都不是問題，但在近些年比較流行的一些輸出工具中，動(dòng)畫的復(fù)雜度就成了問題。對(duì)于復(fù)雜的動(dòng)畫，我們盡量選擇所見即所得的格式輸出。在選擇其他格式時(shí)，也要盡量降低動(dòng)畫的復(fù)雜度，保留關(guān)鍵點(diǎn)，去除多余的細(xì)節(jié)。

情感動(dòng)畫輸出選擇

一般來說，我們根據(jù)動(dòng)畫的類型把輸出方式分為兩類：

所見即所得格式

所見并非所得格式

所謂所見即所得，就是我們?cè)谳敵鲋罂梢灶A(yù)覽一些最常見的格式，例如GI比例的圖像/視頻，這也是我們很多動(dòng)畫輸出的最基本格式：

GIF 圖像格式

GIF 是設(shè)計(jì)師接觸到的最常見的動(dòng)態(tài)格式，自 1987 年被公司推出以來，GIF 就因?yàn)轶w積小，圖像比較清晰，特別適合早期較慢的互聯(lián)網(wǎng)而大受歡迎。因?yàn)闀r(shí)代背景，它的兼容性非常強(qiáng)，基本上可以在目前大多數(shù)智能設(shè)備上直接預(yù)覽。

它的動(dòng)畫效果和平臺(tái)兼容性都非常好，特別是在一些設(shè)計(jì)平臺(tái)上，它是概念演示最流行的格式之一。它還具有很好的可傳播性，因?yàn)樗嫒莶煌钠脚_(tái)和設(shè)備。

當(dāng)然，GIF格式除了自身有種種優(yōu)點(diǎn)外，由于其應(yīng)用時(shí)代的技術(shù)限制，還存在著很多其他的缺陷，上面所說的很多優(yōu)點(diǎn)往往是其誕生初期給它帶來的好處，而它本身就存在著很多不可逆轉(zhuǎn)的問題。

第一點(diǎn)就是占用大量電腦內(nèi)存和性能（根據(jù)GIF的時(shí)間大小等，會(huì)有不同程度的影響），作為設(shè)計(jì)師常見的經(jīng)歷就是在網(wǎng)頁上打開幾個(gè)GIF之后，電腦風(fēng)扇就開始鼓鼓的。

第二點(diǎn)是它是一種有損文件格式，無論是顏色還是圖像紋理都會(huì)受到一定程度的壓縮；第三點(diǎn)是對(duì)透明通道的支持非常有限，輸出效果會(huì)很差，經(jīng)常會(huì)出現(xiàn)鋸齒狀邊緣或者白邊的情況。

以上是我們?cè)趯?dǎo)出為GIF格式之前需要提前考慮的一些問題：上述問題是否可以接受。

另外，導(dǎo)出GIF圖片的過程也常常困擾著很多設(shè)計(jì)師，我也錄制了一篇關(guān)于GIF導(dǎo)出的經(jīng)驗(yàn)分享文章。

常規(guī)GIF輸出（After）有三個(gè)選項(xiàng)：

第一種方法：先AE輸出視頻格式，再通過PS輸出GIF格式，這種方式是市面上最常見的輸出方式，內(nèi)存占用一般，輸出質(zhì)量也一般。

第二種方法：在原有基礎(chǔ)上做局部?jī)?yōu)化，先AE輸出序列幀格式，然后PS選擇圖片的優(yōu)化方式輸出。

這是目前所有輸出方法中內(nèi)存占用最少，失真度最低的方法。內(nèi)存占用低，輸出質(zhì)量高。不過有個(gè)問題，就是無法輸出上述動(dòng)畫（受限于其自身局限性）。

第三種方法：直接通過GIF輸出。內(nèi)存占用一般，輸出質(zhì)量較低。一般在前兩種方法無法輸出時(shí)才選擇這種方法。優(yōu)點(diǎn)是比較穩(wěn)定，基本不會(huì)出什么問題。

下圖對(duì)比了不同輸出方式的輸出結(jié)果：

還有第四種選擇，就是直接通過AE插件導(dǎo)出，該插件是一個(gè)非常方便好用的插件，但是這里不推薦，因?yàn)樗袀€(gè)限制就是只能輸出低30FPS的動(dòng)畫，而且往往輸出結(jié)果會(huì)有掉幀的情況。

EZGIF 壓縮 GIF

當(dāng)我們將圖像輸出為GIF時(shí)，如果圖像內(nèi)存無法達(dá)到理想大小，我們可以使用壓縮。

視頻格式

視頻格式也直接兼容大部分產(chǎn)品，相比GIF格式，在一些衍生格式上它的內(nèi)存可以更小，我們的智能設(shè)備也可以讀取系統(tǒng)性能較小的視頻格式。它的問題在于對(duì)透明通道的支持較差，同時(shí)也是一種有損輸出格式，所以我們?cè)趯?dǎo)出動(dòng)畫時(shí)會(huì)盡量減少使用該視頻格式。

壓縮視頻格式

我們可以通過軟件直接對(duì)視頻格式進(jìn)行壓縮，這樣可以保證我們?cè)谳敵鲆曨l格式時(shí)以最低的內(nèi)存占用來呈現(xiàn)

APNG/WEBP

上面提到的兩種格式是我們接觸到的最古老、最不容易出錯(cuò)的格式，但隨著技術(shù)的進(jìn)步，這些格式顯然已經(jīng)不能滿足我們現(xiàn)在的動(dòng)畫需求了。我們還衍生出了很多新的情感動(dòng)畫格式，比如 APNG、WEBP，這些格式都是從我們現(xiàn)有的 JPEG、PNG、GIF 等格式衍生而來的。

APNG格式是來自代碼社區(qū)的一種格式，是png位圖格式的動(dòng)畫擴(kuò)展，但尚未得到png格式的官方認(rèn)可。通過一些代碼框架，可以在目前所有主流瀏覽器和移動(dòng)設(shè)備上完美支持。與GIF相比，它支持的顏色范圍更廣，更清晰，占用內(nèi)存更少，支持透明通道，具有很多優(yōu)點(diǎn)。

WEBP是由 推出的，目前基本兼容所有主流瀏覽器。同樣的效果，webp格式比png格式大小大約小一半。同時(shí)，它也兼容所有安卓設(shè)備。部分ios設(shè)備需要一定方式支持，但相比較而言，其各方面的表現(xiàn)都十分優(yōu)秀。

這里我推薦一個(gè)可以幫助我們導(dǎo)出 APNG 和 WEBP 格式的工具（它也可以幫我們導(dǎo)出帶透明通道的 GIF，不過以我的經(jīng)驗(yàn)來看，導(dǎo)出 GIF 的效果并不是很理想）。我們可以根據(jù)自己不同的設(shè)備分別導(dǎo)出這兩種格式，這樣既可以保證我們的內(nèi)容質(zhì)量不被壓縮，又可以保證更小的體積和性能使用率。我們也可以直接將這些格式拖到我們的瀏覽器中來查看實(shí)際的預(yù)覽。

這種新格式雖然可以彌補(bǔ)GIF或者視頻的負(fù)面效果，但它們也面臨一個(gè)問題，就是硬件需要各種輔助支持才能使用，而它們?cè)陂_發(fā)階段往往無法得到很好的支持。這時(shí)候就需要我們引入另外一種格式—— Frame/Elf 。

序列幀/精靈

幀序列

在客戶端，我們可以將我們的動(dòng)畫導(dǎo)出為單獨(dú)的圖層序列，并且使用一些工具對(duì)單獨(dú)的圖層序列進(jìn)行壓縮，以達(dá)到最低的內(nèi)存使用量。

序列幀是一種無損低內(nèi)存格式，但是只能在客戶端環(huán)境中使用，不建議在Web環(huán)境中使用。原因是序列幀一般是隨App包一起下載的，但是在Web上每次進(jìn)入新的網(wǎng)頁都需要重新下載。比如一個(gè)60幀的動(dòng)畫要反復(fù)向服務(wù)器請(qǐng)求60次，在如此高頻率的請(qǐng)求下，很容易出現(xiàn)一個(gè)小問題就導(dǎo)致整個(gè)動(dòng)畫無法正常播放。為了避免這種錯(cuò)誤，我們通常會(huì)將這60張圖片合并成一張，通過代碼在規(guī)定時(shí)間內(nèi)顯示某一塊，所以這里我們介紹另外一種格式——精靈圖/

精靈兔/雪碧圖片 ()

當(dāng)我們把所有序列組合成一張圖片時(shí)，往往是不夠的，我們還需要為開發(fā)者提供具體參數(shù)，讓開發(fā)者在什么時(shí)候顯示哪部分，我們可以通過AE插件CSS(By)直接快速地輸出開發(fā)所需的代碼和精靈。

可以說是近兩年動(dòng)畫輸出必提的一個(gè)格式，由國內(nèi)外各大廠推出并迅速推廣，現(xiàn)在已經(jīng)是十分常見和常用的一種格式，AE中其插件調(diào)用，其原理就是將我們的各種矢量元素和位圖圖層以及其關(guān)鍵效果節(jié)點(diǎn)打包成一個(gè)json格式的文件。

我們的開發(fā)人員不能直接使用輸出的json格式，需要在代碼中加入提供的第三方庫來讀取播放，相當(dāng)于我們各種端口設(shè)備上的文件播放器的作用。會(huì)占用一定的系統(tǒng)空間，但一般不會(huì)很大，從長(zhǎng)期的產(chǎn)品開發(fā)角度來說，絕對(duì)可以為我們的App節(jié)省不少空間。這也是它在這么短的時(shí)間內(nèi)得到這么多公司認(rèn)可的原因之一。

它是一款非常強(qiáng)大的輸出工具，可以滿足很多類型的矢量動(dòng)畫和圖片動(dòng)畫的需求。但是它也存在一些不足：首先它對(duì)緩和曲線的解析會(huì)占用很大的內(nèi)存，這個(gè)后面會(huì)講到；其次對(duì)各平臺(tái)的效果支持不是很穩(wěn)定，很多時(shí)候很容易出現(xiàn)bug。

。

顯卡

為了解決由于緩和曲線分析不佳而導(dǎo)致的性能和穩(wěn)定性問題，我們提供了第二種替代方案 SVGA，它在導(dǎo)出后的內(nèi)存使用率和所有終端上的性能穩(wěn)定性方面要好得多。但是，它的內(nèi)存使用率略高，并且支持的功能較少。

與SVGA最本質(zhì)的區(qū)別在于代碼記錄動(dòng)畫過程的方式?；旧纤贏E中是以關(guān)鍵幀和緩動(dòng)的方式記錄動(dòng)畫的；而SVGA則是記錄每個(gè)時(shí)刻各個(gè)圖層的動(dòng)畫狀態(tài)，這樣就省去了緩動(dòng)值的計(jì)算。邏輯上和序列幀很像，但是因?yàn)樗牟馁|(zhì)可以重復(fù)使用，所以占用的內(nèi)存會(huì)比序列幀要小。

基于實(shí)現(xiàn)方法，它將更加穩(wěn)定，并且相應(yīng)地，它將支持更少的功能。

可以結(jié)合使用SVGA格式，而且SVG在設(shè)備上的分辨率比在iOS上好很多，所以在很多設(shè)備上經(jīng)常使用。

和之前的格式最大的區(qū)別就是輸出后不能立刻看到輸出結(jié)果，因?yàn)樗臀覀冎悄茉O(shè)備的格式比較垂直。不過好在他們也提供了一些可以在桌面端和移動(dòng)端直接預(yù)覽的軟件，可以幫助我們?cè)陂_發(fā)完全落地之前排除一些錯(cuò)誤，可以在開發(fā)結(jié)果落地之前提前預(yù)判效果的可行性。

預(yù)覽 (/iOS/Web)：#/

SVGA 在線預(yù)覽：

（經(jīng)過 ）

它可以幫我們從AE中導(dǎo)出CSS格式，理論上這個(gè)插件可以支持我們所有的AE動(dòng)畫，而且大多數(shù)情況下動(dòng)畫質(zhì)量無損，比格式占用內(nèi)存更小。

它的原理很簡(jiǎn)單，就是把所有的動(dòng)畫分成兩種，基礎(chǔ)的動(dòng)畫屬性記錄狀態(tài)信息，復(fù)雜的效果變化屬性直接導(dǎo)出為精靈，一起打包輸出為一套文件，可以忽略我們之前遇到的所有問題，但是有一個(gè)限制就是只能用在web和h5頁面上。

第三方動(dòng)畫庫

要知道其實(shí)第三方的導(dǎo)出方式有很多，但是市面上被大家認(rèn)可的并不多，這類輸出方式的一大優(yōu)勢(shì)就是自帶社區(qū)生態(tài)，尤其是網(wǎng)上有很多開源的動(dòng)畫資源可以直接下載使用，讓我們可以用最小的成本獲得一些動(dòng)畫效果。

/SVGA 優(yōu)勢(shì)

要知道其實(shí)第三方的導(dǎo)出方式有很多，但是市面上被大家認(rèn)可的并不多，這類輸出方式的一大優(yōu)勢(shì)就是自帶社區(qū)生態(tài)，尤其是網(wǎng)上有很多開源的動(dòng)畫資源可以直接下載使用，讓我們可以用最小的成本獲得一些動(dòng)畫效果。

交互式動(dòng)畫和特效輸出選擇

所謂交互動(dòng)畫，顧名思義，動(dòng)畫的內(nèi)容和我們的交互操作相關(guān)，并根據(jù)我們的操作反饋相應(yīng)的動(dòng)畫效果。因此，它的實(shí)現(xiàn)原理比較多樣，也比較復(fù)雜。

貝塞爾曲線

上一篇文章我們提到，大量的貝塞爾緩和曲線會(huì)帶來系統(tǒng)計(jì)算壓力的問題，要理解這一點(diǎn)，我們首先要了解貝塞爾曲線是如何構(gòu)造的。

在開發(fā)環(huán)境中，我們?yōu)殚_發(fā)者提供了貝塞爾曲線，需要以下參數(shù)：

錨點(diǎn) 1 (P0)

錨點(diǎn) 2 (P3)

操縱桿 1（P1）

操縱桿 2 (P2)

在大多數(shù)情況下，我們可以直接按照上面提供的格式連接我們的矢量形狀。少數(shù)情況下，特別是在一些交互效果中，我們需要手動(dòng)提供每條曲線的參數(shù)。然而，我們不可能逐一測(cè)量并輸出每個(gè)點(diǎn)的參數(shù)，這非常不現(xiàn)實(shí)。目前，市場(chǎng)上大多數(shù)設(shè)計(jì)軟件和輸出軟件都會(huì)為我們提供一些簡(jiǎn)單的代碼參數(shù)。

不過這些只是基于靜態(tài)頁面的情況，在動(dòng)態(tài)效果頁面的切換中我們?cè)撊绾芜M(jìn)行連接呢？以下圖為例：

類似這樣的例子中，我們需要為開發(fā)者提供動(dòng)畫的兩種狀態(tài)，分別是圖標(biāo)搜索框形式和輸入光標(biāo)的豎線形式。我們可以直接將各個(gè)路徑的 svg 信息輸出給開發(fā)者。/ 之類的工具雖然可以直接輸出 Web 端使用的格式，但它們只局限于 CSS 格式，而無法提供 iOS 下對(duì)應(yīng)的代碼。為了解決這個(gè)問題，這里推薦另外一款軟件——3。

3是一款專門為設(shè)計(jì)師準(zhǔn)備的簡(jiǎn)易矢量圖形繪制軟件，有了3，設(shè)計(jì)師即使沒有編程經(jīng)驗(yàn)，也可以用合適的圖形輸出iOS/Web/對(duì)應(yīng)代碼，并且與它的關(guān)聯(lián)性非常強(qiáng)，你可以直接在里面復(fù)制合適的形狀，也可以直接在軟件里編輯創(chuàng)作合適的圖形，非常強(qiáng)大。

緩和貝塞爾曲線

緩和貝塞爾曲線就是我們?cè)谠O(shè)計(jì)運(yùn)動(dòng)效果時(shí)使用的緩和曲線，它可以控制我們的運(yùn)動(dòng)效果的速度，直接控制我們運(yùn)動(dòng)效果的整體節(jié)奏。大多數(shù)情況下我們看到的緩和貝塞爾曲線是如下圖這樣的，和我們的貝塞爾曲線很相似，不同的是緩和貝塞爾曲線的兩個(gè)端點(diǎn)是固定的，而貝塞爾曲線的端點(diǎn)是動(dòng)態(tài)的。也就是說我們?cè)诮o開發(fā)者對(duì)接緩和曲線的時(shí)候，只需要提供兩個(gè)控制桿的位置就可以了。如下圖所示，我們的緩和曲線的參數(shù)就是兩個(gè)端點(diǎn)的坐標(biāo)位置，分別是（0.17,0.67,0.83,0.67）。

那么我們?cè)贏E中怎樣得到我們對(duì)應(yīng)的緩動(dòng)曲線的參數(shù)呢？在AE中我們可以將緩動(dòng)曲線圖表的顯示類型選擇為“編輯值圖表”，調(diào)整為我們常用的緩動(dòng)曲線的類型。

為了在AE中獲取緩動(dòng)曲線的參數(shù)，我們可以以圖表的左下角為起點(diǎn)，按照兩個(gè)搖桿的位置建立兩個(gè)矩形，以左搖桿為基準(zhǔn)的矩形的寬和高（整個(gè)區(qū)域的寬和高的比例作為值）作為緩動(dòng)曲線的前兩個(gè)值，以右搖桿為基準(zhǔn)的矩形的寬和高作為緩動(dòng)曲線的后兩個(gè)值。

雖然上面的方法可以讓我們更加方便的獲取AE緩動(dòng)參數(shù)的具體值，但是由于操作比較繁瑣，所以只適用于我們已經(jīng)完成了動(dòng)畫，需要落地的情況。大多數(shù)情況下，我們都需要在動(dòng)畫設(shè)計(jì)之前，通過一些方法來使用參數(shù)來使用緩動(dòng)曲線。Flow插件就可以幫我們做到這一點(diǎn)。

它可以幫助我們使用通用的緩動(dòng)曲線來設(shè)計(jì)動(dòng)畫，并且提供了開發(fā)環(huán)境中常用的25種緩動(dòng)類型。我們還可以自定義一些緩動(dòng)類型，并將它們備份為文件在團(tuán)隊(duì)內(nèi)部作為規(guī)范進(jìn)行傳輸，或者導(dǎo)入一些外部的緩動(dòng)參數(shù)文件。

當(dāng)然，在平時(shí)使用中，還是建議使用一些默認(rèn)的緩動(dòng)類型，這樣做的原因有兩點(diǎn)，一方面這樣的默認(rèn)曲線在算法上更容易計(jì)算，對(duì)系統(tǒng)性能的默認(rèn)占用可以更低，另一方面，很多非系統(tǒng)默認(rèn)的緩動(dòng)差異需要開發(fā)和重寫，無形中增加了我們的對(duì)接成本和后續(xù)的代碼維護(hù)成本。

手動(dòng)注釋

基于我們對(duì)貝塞爾曲線和緩和曲線的理解，我們?cè)谑謩?dòng)輸出標(biāo)注的時(shí)候可以有更多的選擇，也更容易實(shí)現(xiàn)。在手動(dòng)標(biāo)注的情況下，我們需要對(duì)動(dòng)畫中每個(gè)具體元素的參數(shù)進(jìn)行參數(shù)化，一般我們把動(dòng)畫的基本單元分為以下六個(gè)部分：

元素（正在變化的元素）

屬性（元素發(fā)生變化的性質(zhì)）

參數(shù)（屬性的具體數(shù)值變化）

時(shí)間（變化開始時(shí)間/持續(xù)時(shí)間）

差異（動(dòng)畫的緩和曲線）

備注（其他說明）

有了這些基本參數(shù)sketch怎么合并圖層，我們就可以向開發(fā)人員完整的描述我們的動(dòng)畫流程，如下圖所示。

另外，我們還可以采用更加直觀的方式進(jìn)行標(biāo)注，并將這些樣式做成組件并在團(tuán)隊(duì)內(nèi)部推廣，形成共識(shí)，這樣可以大大提高動(dòng)效標(biāo)注交接的效率。

動(dòng)態(tài)效果實(shí)現(xiàn)與擴(kuò)展——代碼

當(dāng)我們通過上述手工標(biāo)注的方式把工作交給開發(fā)人員時(shí)，從設(shè)計(jì)的角度看似乎已經(jīng)把一切都做得很完美了，但回頭再看，輸出的結(jié)果往往大多數(shù)情況下并不是那么令人滿意，這里面有很多綜合因素，站在開發(fā)人員的角度看，我們往往做的很少，無法輸出結(jié)果。造成這種輸出和實(shí)現(xiàn)的巨大差異，最大的原因是設(shè)計(jì)師和開發(fā)人員對(duì)產(chǎn)品構(gòu)成理解的巨大差異。

在輸出動(dòng)畫時(shí)，設(shè)計(jì)師會(huì)花更多的時(shí)間和精力在調(diào)整動(dòng)畫細(xì)節(jié)（緩動(dòng)、時(shí)間等）上，而對(duì)于開發(fā)者來說，影響最終輸出效果的外界因素還有很多，一般有以下幾點(diǎn)：

開發(fā)者的水平

時(shí)間安排的影響

框架結(jié)構(gòu)和代碼語言限制

其他影響

大多數(shù)動(dòng)畫都包含很多細(xì)節(jié)層次，逐一實(shí)現(xiàn)它們需要花費(fèi)大量時(shí)間。例如，要制作如下所示的動(dòng)畫，您只需使用 CSS 設(shè)置最外層面板的寬度并添加過渡動(dòng)畫，但對(duì)于大多數(shù)產(chǎn)品開發(fā)人員來說，您需要同時(shí)為所有外部和內(nèi)部元素制作動(dòng)畫。

第二個(gè)更麻煩的事情是，你在 HTML 中的圖層與 HTML 中的圖層不匹配。所以即使你在動(dòng)畫注釋中標(biāo)記一個(gè)矩形從 0 點(diǎn)向右移動(dòng) 10 個(gè)像素，這對(duì)于設(shè)計(jì)來說非常容易，但代碼中會(huì)有很多非常復(fù)雜的框架層，而且你設(shè)計(jì)的矩形可能并不存在。所以，它增加了一個(gè)煩人的過程。開發(fā)人員需要將設(shè)計(jì)塊調(diào)整到他們的代碼中，并且每個(gè)元素都需要以相同或不同的方式實(shí)現(xiàn)。這是一個(gè)非常容易出錯(cuò)的過程，這完全取決于你在文檔中描述你的動(dòng)畫的清晰度，以及開發(fā)人員審查和實(shí)現(xiàn)你的內(nèi)容的仔細(xì)程度。

第三點(diǎn)是修改動(dòng)畫效果非常麻煩。設(shè)計(jì)和產(chǎn)品開發(fā)是一個(gè)不斷迭代的過程。然而在調(diào)整一個(gè)動(dòng)畫效果的時(shí)候，無論是設(shè)計(jì)還是開發(fā)，都需要花費(fèi)大量的時(shí)間去重新理解之前的文件和代碼。無論是AE文件還是開發(fā)實(shí)現(xiàn)代碼，每個(gè)人根據(jù)自己的理解都會(huì)有不同的實(shí)現(xiàn)方式。從重新熟悉前期版本的實(shí)現(xiàn)邏輯到調(diào)整再到開發(fā)實(shí)現(xiàn)，需要經(jīng)過一套非常復(fù)雜的流程。以上一系列的操作，都是我們?yōu)榱藛蝹€(gè)動(dòng)畫轉(zhuǎn)場(chǎng)所需要付出的大量努力。

為了讓這個(gè)過程不那么痛苦，我們意識(shí)到我們需要跳出舒適區(qū)，使用不同的邏輯來構(gòu)建動(dòng)畫，這也意味著我們不建議使用所見即所得的設(shè)計(jì)工具。相反，我建議你使用 html/css/js 來構(gòu)建我們的動(dòng)畫系統(tǒng)。這需要一些時(shí)間來適應(yīng)，但在做了幾個(gè)動(dòng)畫之后，很多過程就會(huì)變得特別容易。事實(shí)上，對(duì)于開發(fā)人員來說，你不需要了解太多的代碼就可以創(chuàng)建一些基本的動(dòng)畫。

一方面，我們可以真正控制動(dòng)畫的微小細(xì)節(jié)。對(duì)于開發(fā)人員來說，這種方法可以更輕松地將我的代碼適配到他們現(xiàn)有的代碼庫中，而不是大多數(shù)注釋軟件自帶的單薄 CSS 屬性。雖然每個(gè)平臺(tái)都會(huì)有不同的代碼語言差異，但與從設(shè)計(jì)到代碼的跨度相比，它們之間的跨度可以忽略不計(jì)。

我只是把輸出的代碼放在上面，這樣開發(fā)人員就可以輕松地看到我做了什么，也可以復(fù)制和粘貼部分代碼來產(chǎn)生一些效果。

當(dāng)然，這樣做也有自己的問題。首先，我需要在開始設(shè)置動(dòng)畫之前用 HTML 重構(gòu)我的設(shè)計(jì)。但是，因?yàn)槲覀冎辉O(shè)計(jì)動(dòng)畫發(fā)生的部分，所以它不會(huì)受到框架和代碼邏輯的影響，所以會(huì)容易得多。此外，我們還可以直接復(fù)制 CSS 代碼進(jìn)去，這只需要幾個(gè)步驟就可以重構(gòu)我們的設(shè)計(jì)。甚至一些根本沒有動(dòng)畫的部分也可以截圖粘貼進(jìn)去。

還有一種方式就是直接從實(shí)際項(xiàng)目的代碼入手，但是這會(huì)比我們自己寫一個(gè)demo要復(fù)雜很多，因?yàn)閷?shí)際產(chǎn)品的代碼框架更加復(fù)雜，需要重新梳理。

雖然這種工作方式主要是用代碼來做一些動(dòng)畫，但大多數(shù)情況下還是需要先在一些動(dòng)畫軟件上摸索一些想法，而不同的想法可能需要很長(zhǎng)時(shí)間來編寫代碼。所以，如果我不知道自己想要什么類型的動(dòng)畫，我還是會(huì)花一些時(shí)間做一個(gè) demo。

哪怕你在學(xué)習(xí)之前從來沒寫過一行代碼，我也極力鼓勵(lì)你去嘗試。這些東西會(huì)給你非常意外的收獲，而且也有很多優(yōu)質(zhì)資料可以供你學(xué)習(xí)。你不需要從 0-1 開始構(gòu)建自己的代碼知識(shí)體系。很多時(shí)候，連我都是自己動(dòng)手，邊寫邊查代碼，查不到就問公司的開發(fā)。你需要學(xué)習(xí)的可能是對(duì) HTML 和 CSS 代碼的基本框架有一點(diǎn)了解，然后開始寫。有了基礎(chǔ)知識(shí)，你會(huì)發(fā)現(xiàn)你已經(jīng)可以寫出很多動(dòng)畫了。并嘗試將其運(yùn)用到工作中，一一攻克。

還有一種可能就是我們平時(shí)可以用一些簡(jiǎn)單的代碼來畫一些基礎(chǔ)的組件動(dòng)畫，這種東西我們叫腳手架，可以為我們所有的基礎(chǔ)元素制作一些小的動(dòng)畫，比如開關(guān)，按鈕點(diǎn)擊效果等，因?yàn)檫@些都是我們大部分時(shí)間都會(huì)重復(fù)用到的一些組件，制作一個(gè)動(dòng)畫就相當(dāng)于把整個(gè)系統(tǒng)的動(dòng)畫都跑通了，這個(gè)方向不管是自己寫代碼還是通過開發(fā)人員來做都是一個(gè)很輕松的過程，而且它帶來的效果其實(shí)是非常可觀的。

市面上也有一些針對(duì)設(shè)計(jì)師的代碼動(dòng)畫輸出工具，比如 / 等，都是目前開發(fā)動(dòng)畫的熱門產(chǎn)品，也非常推薦大家嘗試一下。

總結(jié)

雖然輸出動(dòng)效的方式有很多，而且隨著技術(shù)的進(jìn)步，選擇也會(huì)越來越多。但是，沒有任何一種方案可以完全解決我們?cè)趧?dòng)效方面的所有問題。而目前市面上沒有任何一種工具能夠真正解決設(shè)計(jì)思維的局限性。作為設(shè)計(jì)師，我們需要時(shí)刻保持敏銳的觀察力，不斷更新自己的知識(shí)樹，以應(yīng)對(duì)各種需求下的動(dòng)效輸出。另一方面，我們也需要站在更長(zhǎng)遠(yuǎn)的視角去理解一個(gè)動(dòng)效需求從產(chǎn)品邏輯到開發(fā)邏輯之間的差距，并嘗試通過更多樣化的手段去跨越這個(gè)差距。

如有侵權(quán)請(qǐng)聯(lián)系刪除！