寫在前面：視覺寶寶們，在設計界全民視頻化，VR，動效滿天飛，每天都在創(chuàng)新的互聯(lián)網設計新時代浪潮下，你還在為自己精心堆砌出的完美像素沾沾自喜么？

 

殘忍的告訴你，這已經遠遠不夠了，得讓你的設計動起來！不僅能讓前端工程師更清楚的理解你腦中的呈現(xiàn)效果，減少溝通及返工成本，同時也能讓我們的設計輸出更加完整專業(yè)并且B格滿滿。

 

然而傳統(tǒng)的用Photoshop時間線來制作動效的方法，過于復雜，并且不夠靈活，在需要做到位移和縮放效果并行的時候就顯得尤為笨拙，往往需要一幀一幀的設置并不斷調試，太耗費精力，并且呈現(xiàn)效果還不一定順暢， 而能夠做出細膩動效的像AfterEffects等專業(yè)動效軟件學習成本又過高，讓人望而卻步…

 

不要藍瘦，不要香菇，這個時候其實我們完全可以偷個懶，彎道超車！

 

來，先看張圖：

 

 

如此流暢細膩的動效當然不是用Photoshop一幀幀做出來的~ 我們用Keynote，3分鐘就能實現(xiàn)，快來一起get這個技能吧！

 

首先，你的電腦里需要安裝以下2個軟件：

 

 

Step 1，先將你需要制作動效的源文件在Photoshop里分好層，并導出png文件（以進口無線伙拼題圖動效為例）；

 

Step 2，再拖移至Keynote里，并將分層的圖片按照設計稿中的最終位置及圖層順序排列；

 

 

Step 3，為每個需要動態(tài)效果的圖層設置動作，可以是位移并同時縮??； 操作：動畫效果 > 動作 > 添加效果 > 移到，然后鼠標拖動圖層至需要移到的位置及尺寸

 

同時可以分別針對每個圖層動作設置 “持續(xù)時間”，使動作呈現(xiàn)效果更有層次；

 

 

Step 4，全部設置完成后，點擊右下角 “動作順序” , 將構件順序全部設置為 “與構件1一起”，至此你的動效設計已經完成一大半了！點擊預覽，查看呈現(xiàn)效果，如不夠完美，可回到Step 3，繼續(xù)對每個圖層動作進行微調。

 

 

Step 5，預覽確認視頻效果ok后導出MP4，保存； 操作：文件 > 導出到 > Quicktime

 

 

將等待時間全部設置為0秒，如需小尺寸輸出可將格式設置為720P，導出尺寸會更小。

 

Step 6，將導出的視頻文件在MAC系統(tǒng)自帶的Quicktime Player中打開，快速剪輯（如不在意動效前后停頓時間過長可省略此步驟）； 操作：編輯 > 修剪，此時可以看到播放窗口中的視頻文件部分出現(xiàn)了一個黃色的邊框，拖動黃色邊框兩端部分，裁切掉視頻前后部分的空白內容，保留中間動作部分，并儲存；

 

 

 
 

Step 7，在Photoshop中打開剪輯好的視頻文件（如需要，可在Photoshop中對視頻尺寸進行裁切），輸出gif格式； 操作：文件 > 儲存為web所用格式，選擇Gif格式，并將動畫循環(huán)選項設置為永遠；

 

 

 

至此，祝賀你，動效已經完美生成，預覽一下看看，是否足夠順滑流暢。

寫這么多，其實就是拋個磚，大家可以發(fā)揮想象力，開大腦洞，制作出更為精細順滑的動態(tài)效果。