【Medium UX譯文】如何快速製作一個完美的追波動效
此篇譯文將介紹一種Mediun上dribbble大神分享的利用Mac OX系統的終端命令列高質量轉化視訊檔案成gif的方法，有改動和備註
原文資訊：
標題：How to prepare perfect GIFs for Dribbble in seconds
作者：Vlad Fedoseyev
地址： ofollow,noindex" target="_blank">https://uxplanet.org/how-to-prepare-perfect-gifs-for-dribbble-in-seconds-c683a44deae
已獲得作者允許
譯文有所改動
寫在前面：
此篇推文將介紹一種Mediun上看到的高質量轉化gif動畫格式的方法，僅翻譯了其中最主要的部分。
這種方法是利用Mac OX系統的終端命令列轉化視訊檔案成gif，其優點是簡單方便，轉化速度快，檔案比較小，質量也挺高的，而且不侷限於各種格式的視訊檔案。
當然缺點就是侷限於Mac OX系統，而且需要輸入一些程式碼（不過其實很簡單，複製改動關鍵詞就可以）。
再逼逼一下：
動效在設計領域中越來越成為一種趨勢，動效的加入會使作品跳出靜態的維度，他既能更好的表達設計師的想法創意，更能給使用者、觀眾帶來良好的體驗。
不管你從事哪一型別的設計，UI、品牌、插畫等等都好，懂動效的設計師就像金子一樣閃閃發光。
那麼我們在日常的設計中，花了無數個小時用AE、Principle等動效設計軟體製作了各種精美的動畫，它看起來很神奇，一切似乎都沒問題......剩下的唯一一步就是製作一個好的GIF檔案，而匯出gif檔案常常是一件比較頭疼的問題。
經過嘗試我們都知道，用AE、Principle直接匯出的gif質量非常差，而大多數人也找到比較良好的替代方法，就是直接匯出avi、mov等格式的視訊檔案，然後在ps裡面進行簡單轉換，大多數時候這是非常棒的方法，效果也還很不錯。
但是ps裡面轉gif我們會經常遇到各種各樣的問題，比如他有500幀的醜陋限制，顏色也非常受限，調起來非常麻煩。
幸運的是，前些天在逛dribbble的時候，我就偶然發現一個設計師在Medium的uxplanet介紹一種用終端命令程式碼的方式來轉化視訊格式到gif，一開始看到“命令”“終端”我也很害怕，想必做設計的看到這些技術的都會膽怯吧。
不過操作一遍後感覺非常簡單方便，最重要的是轉化效果超級贊。
原文是英文的，作者介紹的比較簡單，我把坑都踩了一遍，於是順便想當下搬運工，把原文這一部分簡單翻譯加上一些提醒在這裡介紹一下，方便各位老鐵一起學習，有一點點改動，下面就正式介紹啦。
FFMPEG
FFMPEG是一個命令列工具，它是基於Mac OX系統的小工具，可以讓你使用幾乎所有型別的媒體檔案執行任何操作。
不過它需要在終端先下載Homebrew（Mac OS平臺下的軟體包管理工具，擁有安裝、解除安裝、更新、檢視、搜尋等很多實用的功能）
如果“命令列”和“終端”這兩個詞聽起來很可怕，請不要擔心。作者已經寫好了流程，只要一步一步跟著操作，很簡單的，我保證～
1、安裝Homebrew
開啟Mac OX系統的終端，輸入下面安裝Homebrew命令，回車執行命令，這個過程等待大概幾分鐘好像，靜等安裝完畢就OK
/usr/bin/ruby -e "$(curl -fsSL <a href="https://raw.githubusercontent.com/Homebrew/install/master/install)">https://raw.githubusercontent.com/Homebrew/install/master/install)"</a>
2、安裝FFMPEG
同樣，開啟Mac OX系統的終端，輸入下面命令，回車，靜等安裝，挺快的，安裝完就是操作了
brew install ffmpeg
3、導航到視訊檔案所在的資料夾
在終端輸入導航到資料夾位置
cd path/to/your/file
建議在桌面建一個英文名資料夾，然後把視訊檔案改成英文名放進去，檢視簡介資訊複製資料夾位置，比如我在桌面建了資料夾“ae” /Users/huize/Desktop/ae
那我在這裡應該輸入的是“cd /Users/huize/Desktop/ae”，回車執行命令
4、建立調色盤檔案
步驟3回車之後，繼續輸入下面命令，需要注意一些東西：
- input.mp4 是你要轉換的視訊檔案（還可以是mov，avi等等，比如這裡我的資料夾裡視訊叫test.avi我就需要更改成test.avi）
- fps=25 是你在GIF中需要的幀速率（預設25幀/秒就行了，當然可以改動）
- scale是尺寸比例，這裡是明確要求FFMPEG將視訊大小調整為Dribbble長寬比（可改但無需更改）
- palette.png 是你的輸出調色盤檔案（這個檔名也可改但無需更改，直接就行）
ffmpeg -i input.mp4 -vf \ fps=25,scale=800:600:flags=lanczos,palettegen palette.png
比如這裡我應該輸入的是“ffmpeg -i test.avi -vf \ fps=25,scale=800:600:flags=lanczos,palettegen palette.png”
回車執行指令碼，此時你會得到一張像下面這樣的圖片（在資料夾裡），不需要管他，繼續就行
palette.png
5、將視訊轉換為GIF
繼續輸入下面命令，同樣需要注意一些東西：
- input.mp4 是我們用於生成調色盤的相同輸入檔案（跟前面統一，比如我的test.avi）
- palette.png 是上一步的結果（檔名如果上一步改了就要統一）
- fps 應該保持不變
- 尺寸比例 也保持不變
- output.gif 是你的輸出檔案
ffmpeg -i input.mp4 -i palette.png -filter_complex fps=25,scale=800:600:flags=lanczos[x],[x][1:v]paletteuse output.gif
比如這裡我應該輸入“ffmpeg -i test.avi -i palette.png -filter_complex fps=25,scale=800:600:flags=lanczos[x],[x][1:v]paletteuse output.gif”
回車執行指令碼，鐺鐺鐺完成～
是不是很簡單其實，效果還超級讚的。
作者Vlad Fedoseyev 的作品
6、優化，檢查檔案大小
檔案就輸出在同一個資料夾裡，到這裡基本上就算結束了，但如果輸出結果大小超過10 MB，則需要降低fps並重覆上面步驟以獲得完美結果。
作者的註釋：
也許你問我們為什麼需要顏色調色盤檔案？
簡而言之，GIF支援256種顏色，如果轉換器選擇了錯誤的調色盤，結果將看起來很奇怪。您可以在以下示例中輕鬆注意到小點：
仔細觀察可以看到很多點點
可能踩的坑：
1、所有字元都要英文模式下輸入，如果原文用了中文網頁翻譯，不要直接複製，因為那樣子會有bug，需要轉成英文模式下複製(可以點開原文在英文模式下複製它的程式碼）
2、自己輸入的話，命令列中的空格鍵什麼的都不能省略
3、第3步導航到視訊檔案所在的資料夾的時候注意要在前面輸入cd再輸入檔案位置，剛開始看原文我以為不需要也折騰了一會
......
正如你所看到的，這種方法制作gif並不困難，它其實是非常高質高效的。有些事情你覺得困難不敢踏出第一步就會永遠停留在原地繼續浪費時間，相信我，嘗試一下吧，不要害怕FFMPEG，你會愛上這種方法的~
希望這篇文章對你有用~
要不點個贊再走唄~