在InVision，GIF動畫絕對不僅僅是玩玩而已，因為它們在invision的營銷和教育方面也發(fā)揮了很大的作用。甚至?xí)x擇GIF作為自己的主頁，而且不會使用復(fù)雜的花哨的代碼。

所以，最后總是有人問，GIF動畫是如何制作的？

設(shè)計GIF動畫

1.基本要求

這是我自己的一點小秘密，所有的GIF都是錄制的視頻，使用的工具是：screenflow（譯者推薦一個GIF錄制工具：LICEcap，非常實用），這也是我制作產(chǎn)品時用到的軟件，它們是非常容易學(xué)習(xí)的，而且還有一些非常棒的動畫工具可以使用。

當(dāng)我制作好一個視頻文件之后，就會通過導(dǎo)入到Photoshop 文件>導(dǎo)入>視頻幀作為圖層。

注意：不管是使用screenflow或者是AE制作，記住最后一定要導(dǎo)出成一個視頻。

2.顏色越少＝更多的樂趣

如果是想制作一些比較復(fù)雜的GIF，那么就要確定好自己的用色，它不僅會影響到文件的大小，還可以使得GIF的動畫可持續(xù)的時間更加長些，更復(fù)雜的GIF就盡量使文件小些（通常對我而言1M左右正好。）

3.如果可能，請使用運(yùn)動模糊

像scrennflow和AE都可以使用運(yùn)動模糊的功能，并導(dǎo)出視頻，這樣不僅可以顯得更加專業(yè)，還可以在ps中出現(xiàn)丟幀現(xiàn)象時幫助做一些修改。

4.集中重點部分

想象一下，我如果在GIF中添加很多的其他東西，例如提示和用戶名，光標(biāo)點擊加號按鈕，將鼠標(biāo)懸停到臉上，更多的提示和懸停狀態(tài)。用戶通常并不需要看到這么多，所以只要顯示自己所需的以及文件的大小控制。

導(dǎo)出GIF動畫

做好了下面幾步，就只要直接導(dǎo)出GIF動畫就好了。如果文件大小合適，那就很棒，如果太大那就要用到下面的方法了。

5.刪除重復(fù)幀

如果我們仔細(xì)觀察就會發(fā)現(xiàn)動畫中有些地方是會有暫停和停留的地方，這里就包括一些重復(fù)的幀，只有0.03秒的持續(xù)時間，如果說有10個幀是重復(fù)的，那么我們可以刪除其中的9個，并將這一個重要的關(guān)鍵幀設(shè)計的時間設(shè)置更長一些，例如1秒。

如果之后確定沒有問題了，就可以嘗試著導(dǎo)入視頻，并將其限制為每兩幀，這樣就會減小文件的大小了。

注意：這個不是硬性規(guī)定，如果說你做的GIF有超過150幀，那就很難保證文件下降了。

6.減少顏色的使用

當(dāng)在GIF中保存photoshop時，就會在右邊看到一個“顏色”的下拉框，對于這里，盡量保證低，但又不至于使得GIF打開變成一個個沒法使用的色塊。

7、對部分損失做好調(diào)整

談到這點其實我也不太清楚，但是我也能感知到，如果我們在1到10之間設(shè)置這個值就會感受到，減少文件大小又對質(zhì)量沒有太多的損害。

如果說上面提到的都嘗試了，還是沒有辦法使得文件變小，那么就應(yīng)該考慮自己是不是做的太多了，也許有另一種方法來完成這個呢，或者是一個GIF分成兩個GIF。最后如果我們專注于GIF，那么就會把它成更加有創(chuàng)意的產(chǎn)品。

來源于：InVision

https://medium.com/@InVisionApp/7-tips-for-designing-awesome-animated-gifs-d51af4bae8b7#.9omr3wxzh