【技能】iPhone上看到好的動效，如何保存成GIF

經常在網上看到一些介紹手機APP動效設計的文章，一直好奇這些手機APP里的動效是怎麼保存成動態圖片的。自己在日常工作中也有看到好的動效設計要保存下來的需求——留著APP太占手機空間，刪了APP要用的時候又無法跟開發描述清楚。

要將手機APP里看到的一段動效保存成動態圖片(GIF)，總的思路不外乎：先將這段動效錄屏，然後將這段錄製好的視頻轉換成GIF。

但由於iPhone系統許可權問題，在不越獄的情況下，無法做到只用一部手機就搞定這些事情。在網上查閱了不少相關帖子，也諮詢了其他設計同行，摸索出一套自己目前覺得最滿意的方法，現分享給大家。

需要用到的配料：

• iPhone（iOS 需要升級至iOS 8）

• Mac（OS X 需要升級為Yosemite）

• PicGIF for Mac（一款小巧的格式轉換軟體）

目前給iPhone錄屏最方便的還是用Mac（好馬配好鞍...）。首先用手機數據線連接iPhone和Mac。找到Mac系統自帶的軟體QuickTime，雙擊打開。

在Dock欄上右鍵該圖標，選擇新建影片錄製（注意是影片錄製而不是屏幕錄製哦，這個設計的心智模型是不是很棒…）。

這時候你會看到默認打開的是mac攝像頭錄製的畫面（通常是自己的一張大臉）而不是手機屏幕的畫面。這時你需要點擊界面下方紅色圓點邊上的下拉箭頭，在菜單里選擇XX的iPhone這一項。

這時候就窗口變成了和你手機屏幕一樣的比例，同時顯示出了手機屏幕上的畫面。

Thats it~ 準備好之後，點擊界面下方的紅色圓點開始錄製，再次點擊停止錄製，這樣兩次點擊之間的操作畫面就被錄製下來了。點擊左上角關閉，在彈窗里選擇存儲。

接下來打開PicGIF這個軟體，點擊添加視頻，選擇剛才保存的那段視頻。

會看到一個視頻預覽畫面，右下角有一些參數供選擇：幀數越多，最後保存的圖片動效流暢度越好，但同時生成的圖片體積也越大。根據自己的需求把握，若沒有要更改的，直接點擊右下角的載入。

可以看到在界面底部，視頻已經被分成了一張張連續的靜態圖片（每一張代表一幀），你可以手動刪除其中看上去重複的幀，以減小最後生成的文件體積（通常在開始錄製和結束錄製時，操作會停止一會兒，這裡會產生很多相同的幀，是可以刪掉的）。編輯完以後，點擊右上角的"創建GIF"。

預覽最終生成的GIF，點擊右下角的存儲。

好了，一張動態圖片製作完成！得益於知乎專欄不支持GIF圖顯示，大家按照前面的說明和靜態截圖自行嘗試吧~

-----------------------------------------------

雲音樂交互組微信公眾號：聽音樂做設計