製作UI動態效果展示demo，如何輸出高質量小體積的GIF圖？

12-15

使用Flash輸出的gif圖品質很差，有什麼好的辦法嗎？
我看花瓣上那些動效的品質都很好，希望知道是怎樣做出來的

可以用PPT製作，在 PPT 動畫這個問題上，首先你要糾正2個觀念：

1】【PPT動畫太簡單了】不，它並不簡單，它非常強大。先發個國外牛人用PPT做的動畫視頻你們感受一下

（* Sina Visitor System 這是作者的微博，有提供原文件分享）

2】【PPT動畫很難？】不，PPT 動畫很好上手，從開始摸索，到做出這個核心玩法的 demo之間約為4個工作日，我幾乎是0基礎自己摸索自學的，前面的2天我還做了一系列的 UI 動效和另一個版本的demo

demo

demo是用PPT做的，耗時約為2個工作日
（* 動畫內部分 UI 元件是通過Axure畫好之後輸出PNG，再用PS除背景得出的，因為答主有像素級的強迫症，正常人類可以忽略這條，PPT提供的元件類型已經可以滿足絕大部分的需要）

基本上只要不是特別變態的核心玩法demo都可以快速做出來。

可以做一些用以示意的細節，但不要太較真，此類demo的核心價值應該是：快速驗證玩法邏輯！

回到問題的源點---------怎麼用PPT製作一個核心玩法demo？

1. 你必須有一個清晰的玩法模型在你的腦海之中，不然還整個屁啊 (?｀?Д′)???????―

2. 分解模型，一般而言，動畫里同一秒間都會並發好幾個事件，答主的思路是以事件為單位，逐個事件完成

3. 實例部分，以答主這個demo為例，在製作之初，我選擇了一個最能說明「時間」的事件來開始

（* 這裡是這段動畫事件所需用到的素材）

-------------------------------------------------------------
首先，我們插入素材

然後，我們看到的界面大概是這個樣子的，緊接下來，把動畫窗格也打開，這對於一段簡單的事件動畫來說沒什麼必要性，但它是一個好習慣，好習慣應該從入門的時候就先適應起來

（* 點擊綠色方框，可以對元件進行改名，當你的動畫複雜到有數十個元件的時候，你會發現對它們改名管理的重要性）

（* 點擊綠色方框右側的眼睛標誌，可以隱藏顯示該元件，這個功能在製作一些比較複雜的動畫時會經常用到，因為元件一旦多起來，非但不易選中，而且很混亂）

再然後，我們開始添加第一個動畫了，打開PPT的動畫編輯界面，考慮到蠻多很可能新手不知道，我就送佛送到西，附張尋寶圖：

然後選擇一個動畫樣式，還記得我demo里這兩個方塊怎麼移動的嗎？不記得了？快回去重新看demo，你試圖臨摹一個動畫之前，首先你必須把它所有表現細節看得滾瓜爛熟，這樣你才可以在製作動畫的時候瞭然於胸

「尼瑪，我已經把demo看得滾瓜爛熟了，我要繼續翻滾頁面閱讀」

好，我們來找一個跟需求相符的動畫模型

（* 如果你在選取動畫模型這一步過程中發現模型全都是灰的不能點擊，那說明一個問題-------你還沒選中元件啊，蠢貨，快去選上！）

添加完動畫模型之後，你會發現方塊已經可以動起來了，接下來要做的就是把它的運動路徑、速度、播放順序，調整到符合你要求的樣子

先是運動路徑，如果你跟答主一樣是個像素級精準的強迫症患者，你可以把 PPT 內的網格線、參考線、標尺全部打開，如果你是一個五大三粗的摳腳大漢，可以跳過這一步。

接下來，留意下圖綠色框的兩個箭頭，它們分別代表起始點和結束點，你可以通過滑鼠點擊拖動來調整它們的位置，按住Shift來拖動，可以確保兩點始終維持水平的狀態

調整好運動路徑之後，我們再把方塊的移動速度和移動順序調整一下

（* 小技巧1：如果你希望 PPT 可以自動播放，那麼只要把【動畫窗格】內第一個動畫的開始方式調整為「與上一動畫同時」即可）

（* 小技巧2：如果你的 PPT 動畫不是很複雜，沒有什麼並發的事件，那麼我推薦把動畫窗格內的事件都選用「上一動畫之後」，這樣的好處是你不需要逐一去調整事件的延遲時間，前提是你必須確定這段動畫沒有其它並發事件的存在，否則還是老老實實通過調「延遲時間」來控制播放順序吧）

調好之後，你現在看到的頁面應該是這樣的

2個方塊的運動軌跡設計跟10個方塊的運動軌跡設計是沒有區別的，所以做成這個樣子也毫無難度

可能看到上圖的時候你腦海中會出現2個疑問：

1. 為什麼有些方塊的運動軌跡是兩段的呢？
2. 為什麼動畫窗格中除了「―」這種動作外，還有一些「紅色星星」和「綠色星星」的動作呢，它們分別代表什麼，有什麼用？

讓我們回顧一下demo，demo有幾個事件：

1. 每隔一段時間刷出新的方塊，然後向右靠攏
2. 方塊是會被點擊動作消滅的，如果被消滅的方塊處於中間位置，那麼在它左側的方塊會向右靠攏

ok，那麼問題解決了：
1. 為什麼有些方塊的運動軌跡是兩段的呢？
因為這些方塊右側的方塊在動畫過程中將被消滅，所以它會向右靠攏，第二段移動動作就是發生在此時的，這個視乎你自己的設定，也有可能某個方塊會發生三段甚至四段的移動。
（* 對單個元件添加多個動畫的方法很簡單，如下圖）

2. 為什麼動畫窗格中除了「―」這種動作外，還有一些「紅色星星」和「綠色星星」的動作呢，它們分別代表什麼，有什麼用？
首先我說明一下，PPT 把動畫模型分為了4個大類：出現、強調、消失、路徑，對於大部分元件來說，出現和消失都是必須的。動畫模型會在動畫窗格中根據自身的類型標記出來：

出現=綠色星星
強調=黃色星星
消失=紅色星星
線條=運動路徑

還記得我們動畫里方塊的出現是有一定的時間規律的么，對就是這樣，所以你要給後面出來的方塊都添加上「出現」的方式，並設置好"出現時間"，然後再給它們設定「消失」的方式，以及"消失時間"

都添加好之後，你就會看到類似於這樣的結果

（* 思考題：為什麼答主要把方塊垂直放置，而不是堆疊？從這個事件動畫的最終表現形式來看，這些方塊之間的關係應該是堆疊才對啊）

「心目中有自己的答案了么？滾動看答主的動（jie）機（kou）」

原因很簡單，因為元件堆疊之後，運動路徑也會堆疊，這樣的話，如果在檢驗動畫（播放動畫）的時候發現有需要調整的地方，而想調整的時候就會發現，很難選中你想要選擇的原件

但是，這樣的問題在動畫製作到後期時會非常頻繁的遇到，難道就沒有其它更加科學的解決方法嗎？當然是有的

當我們需要製作比較複雜的動畫時，尤其是並發事件的時候，隱藏掉不必要的原件是非常有必要的，點擊上圖中紅框範圍內的「眼睛」圖標即可

那為什麼答主有這樣的方法還是要把方塊垂直排開而不堆疊後，隱藏元件來進行處理呢？

那樣做確實是可以的，只不過因為答主比較懶，為了確保方塊之間的間距能夠符合預期，所以把它們垂直排開，調好動畫時間之後，逐一調整運動路徑確保它們之間的間距符合預期。

最後都調好了，再把它們疊一起，變成這樣

--------------------------------
做好【方塊的出現移動消失再移動】事件之後，我們來開始做第二個事件【角色運動】

其實非常簡單，從原理上來說，它跟方塊的移動，是一個道理，上圖你們看一看就明白了

幾個要點：
（* 確認角色運動的起始時間點：由於我們把事件分拆來逐一處理了，所以給自己一個方法理清楚事件的並發事件非常重要，為什麼我在做demo的時候選擇先做【方塊的出現移動消失再移動】事件，因為它對我來說就是一個時間軸-------當某方塊消失的瞬間，即是角色運動的起始時刻）

（* 確認角色運動的結束時間點：重要甚至比起始點更重要，它的意義在於讓你明確這個動畫事件的最大允許持續時間，亦即是決定了動畫播放速度）

（* 運動方式：視乎遊戲類型不同，對於運動方式的處理難度也不同，比如說我的demo里這種程度的運動，簡直是小case，只要拉個弧形運動路徑，調整一下就行了，調整方式詳見下圖）

圖1. 在這裡打開【頂點編輯】模式

圖2. 如果你會用PhotoShop的鋼筆工具，那麼恭喜你，這個是一樣的

圖3. 事實上你還可以直接拉伸白色圓點進行縮放，或者點擊綠色圓點進行旋轉

補充說明：做完這個運動路徑之後，你會發現角色可以在預定的時間點跳出去了，但不要忘了補一個角色回歸原位的運動路徑讓他「回家」

前幾天有人私信我問「如果想做更複雜的角色動作怎麼辦，要用序列幀么？」，這個問題有點低級，但我還是回答一下吧，如果你對 Flash 動畫有所了解，你應該明白它主要是通過設定元件的運動路徑來實現角色運動的

我舉個栗子，如果你需求實現一組複雜的角色動作，首先你應該先把角色的模型弄得稍微複雜一點具體複雜度視乎你需要該角色做出怎樣複雜的動作了，「建模」完成後，記得給角色的各個部位命名，比如說這樣：

（* 就用 PPT 裡面插入幾個圓柱形實現的）

然後，就是給各個部件設置運動路徑啊，如果想做得流暢而富打擊感，那麼確實是挺複雜的，可是！！！你！別！深！陷！啊！快醒醒，這是一個demo，展現玩法邏輯的低保真demo，整那麼複雜幹嘛，能讓別人看懂你想做什麼不就得了

火柴人動畫有很多做得相當不錯的案例，但我實在不建議非美術專業人士去嘗試，我就轉給你們看看，別較真

如果你覺得我說得還不錯，可以下載我製作的獨立遊戲，支持一下。
AppStore搜索：神秘來電
或者直接掃描二維碼

https://itunes.apple.com/cn/app/shen-mi-lai-dian2-yi-chen/id1071169549?mt=8 (二維碼自動識別)

----------------------------------------------------------
參考文獻：你看過最華麗的 PPT 是什麼？ - 調查類問題

看到在說PPT製作的那個棒槌，真想罵你一頓。。。人家說的是gif！！

PS里的「儲存為web用格式」是我用到的轉成GIF格式最好的方法。AE或flash直接導出的GIF都跟屎一樣。
AE或者flash製作，導出視頻文件。在PS里打開視頻文件，文件--儲存為web用格式，選GIF。
記得選循環選項的「永遠」。

聊聊那些令人愉悅的動畫效果

Flash的GIF輸出是比較爛的
建議導出為png序列圖然後導入到PS或者Fireworks進行GIF動畫的輸出
Tips：
1.PS的GIF幀最多500幀，超出的部分不再渲染。
2.GIF動畫色板只支持256種顏色，所以顏色不宜超過這個數目不然會出現色塊斷層。
3.追求超過256色的高質量顯示效果時候，可以換一種小眾格式 APNG，目前火狐瀏覽器支持。
4.Flash CC版本支持直接導出web動畫，如果顧忌文件較多，可以打包為air文件方便跨平台演示。

quartz composer做完用quicktime錄屏，進ps導出gif。其實如果不是非要gif的話，quicktime錄出的mov體積很小，而且質量很高，可以嘗試

如果用FLASH做的圖，那麼你可以導出PNG序列，然後再PS里導入序列圖片做GIF，效果沒問題，不過每張圖的時間間隔，你要調整下，

我們一般用AE做好視頻demo，渲染輸出後直接導入到PS中，視頻會自動轉換為逐幀動畫，可在PS中進行簡單編輯，然後使用另存為web格式來導出GIF動態圖！需要注意的是，GIF本身會壓縮圖像，因此不要大量使用漸變效果，否則色彩過渡十分生硬，會看到明顯的階梯效果。此外，如果對GIF大小有所限制，可以在AE中降低輸出幀率，打開動態模糊，從而保證GIF流暢性的同時不會體積過大。

還得是用專業的工具做專業的事兒

動畫部分可以用Flash或者PS來做，兩者都可以輸出圖像序列。
建議在Flash中做完整動畫，輸出PNG序列
然後將圖片序列導入PS做GIF動畫
在PS中做GIF有一些技巧，首先你的PS需要有新版的時間軸，而不是原來的那種一幀一幀的時間軸，在PS拓展版里會有這個面板

在一幀一幀的那個時間軸里載入你的圖片，然後切換為新版時間軸，在新版時間軸裡面進行動畫播放，其實同時也進行了動畫渲染，然後再存儲為網頁格式，選擇GIF格式，並設置動畫為永遠播放即可。

好吧，沒看懂的人不管你們，我說的太籠統了。

可以藉助可截屏的電腦手機管家（如應用寶= =沒在打廣告）+PS：
1.連接上手機後使用應用寶的動態手機截屏功能，（截屏數可以適當多些，這樣動圖看起來會流暢些）生成截屏動畫的gif文件
2.用PS打開步驟1生成的gif文件，這時候因為該gif圖片切換速度很慢（圖的延遲時間長）所以看上去一卡一卡的，所以只需用PS修改每個圖層的延遲時間就OK，在窗口選項中的時間軸裡面可以編輯，然後保存成web所用格式的gif
-over