動效設計一直是我想學但又沒時間系統(tǒng)學習的一個技能，因為想要學好 AE 這個軟件確實是需要很多的時間和精力，但是如果工作中有一個緊急的需求，需要設計師快速出 gif 圖许饿，這個時候用 Photoshop 的時間軸就能在3分鐘內(nèi)搞定。
下圖是我用 PS 導出的 loading 動畫舵盈，接下來我就詳細說明一下步驟：
1-首先陋率，新建一個980×330的畫布，在窗口中打開時間軸面板书释。
2-用形狀工具繪制3個300×300px的圓翘贮，水平居中分布。
實際上我設計圖中這個動畫的圓最大只有50px爆惧，之所以在 PS 中放大了6倍狸页，是因為 PS 導出 gif 很容易產(chǎn)生毛邊，影響實現(xiàn)效果扯再，所以盡可能放大幾倍來畫芍耘。（在交付切圖文件給前端的時候，盡量都用2x的圖熄阻，這樣在 retina 屏上就不會模糊斋竞。也是同樣的道理。）
3-將三個圓的形狀圖層轉(zhuǎn)換為智能對象秃殉，因為形狀圖層現(xiàn)在還不支持針對大小的關鍵幀變化
4-對第一個圓設置關鍵幀坝初，時間軸移到第一幀（00f），點擊“變換”前的小時鐘钾军，選擇第一個圓鳄袍，control+t，使之縮小到0px吏恭；然后將時間軸移到第二幀（01:00f）拗小，再將圓放大至300×300px，這時會自動出現(xiàn)一個關鍵幀的標記樱哼；最后將時間軸移到第三幀（02:00f）哀九，再將圓縮小至0px。
這時候三個關鍵幀就設置好了搅幅，注意阅束，放大和縮小的時候中心點一定要固定不變。
5-同樣的道理茄唐，完成另外兩個圓關鍵幀的設置息裸，兩個圓之間的關鍵幀時間間隔必須保證相同，我這里的時間間隔是05f，即圓1\圓2\圓3第一幀的時間分別是00f\05f\10f界牡。
6-這樣一個簡單的 loading 動畫就做好了，單擊空格鍵預覽一下漾抬，開啟循環(huán)播放宿亡，將時間軸幀速率設置為15fps。
7-最后一步纳令，將背景圖層刪掉挽荠，導出-存儲為 web 所用格式，gif 格式平绩，顏色256圈匆，將循環(huán)選項設為“永遠”。搞定~
