通過AE+PS+CSS3動畫 實現炫酷的滑鼠hover效果（上）——動畫的製作和PNG序列的輸出

一、大體思路

大概就是用AE做動畫匯出幀序列，PS排版成一個長條的圖片，然後再在css樣式中設定動畫。AE做炫酷的動畫簡直輕鬆加愉快，所以可以做許多效果。不過，這種方法僅適合一些用程式碼實現起來比較困難，而對其靈活性又沒有什麼要求的動畫。

我們以滑鼠hover後提示可點選播放的互動為例。

首先來看效果圖：

上圖來自我做的一個網頁，裡面展示了我的一些簡報作品，包括PPT，Prezi，Axeslide等。網頁現還只是個雛形，這個hover效果的動畫做得也還不夠好，不過這裡還是分享一下實現的思路，如下。

1、在AE中製作動畫，匯出png圖片序列，也就是匯出每一幀；

2、將圖片序列匯入的到Pohotshop，排版，得到一個很長的圖片；

3、在css樣式中新增背景圖片，通過改變背景圖片位置來實現動畫；

有人可能不屑了，說這哪裡有標題寫的那樣——較複雜的效果。的確，上面這個例子效果並不炫，但是這種方法的好處就在於，無論你需要什麼動畫，只要能在AE中做出來就行了，CSS中的程式碼甚至不用做什麼改動。

二、在AE中製作動畫

對於熟悉AE的人來說，這個動畫該是信手拈來了，不過即便不熟悉AE的人也沒關係，製作這個動畫並不需要很多的AE技能包。

這裡我們就講詳細一些，照顧初次用AE的人，會用AE的就跳著看吧。

1）首先開啟AE，在專案面板中右鍵新建合成。

設定引數。命名hoverEffect，解析度與網頁中加動畫效果相應div的寬高相同。本例中是240*143 。幀率設定為30，時間1秒就足夠了。

2）在合成面板裡右鍵new--solid，新建一個固態層，

大小維持預設與合成一樣大小，這個固態層作為背景，顏色白色稍微灰一點。這樣便於分辨。

 同樣的方法再建一個固態層，設定成正方形，寬高都是143，顏色白色。這個固態層用來做變化的圖形，就是那個三角形。

3）接下來，figure層一個圓形遮罩，方法是選中figure層後，在工具欄中按住alt鍵點選矩形圖示，直到切換成橢圓形-->

  同時figure層多了一個遮罩，mask1，就是用它來做動畫。

4）在網上隨便搜一張正三角形的圖片，匯入到AE中。

拖到合成面板中，選中按T鍵，降低透明度，

再按S鍵調整大小，方向鍵調整位置，使其頂點正好在圓邊上。（也可以直接用滑鼠拖動調節）

5）先選中figure層，然後選鋼筆工具

給mask1遮罩在三角形頂點位置加兩個點，這是為圓形向三角形變換而做的準備。

6）開始做動畫。我們一共有30幀，前18幀做滑鼠放上去的動畫，後12幀做滑鼠離開的。（當然你也可以只做滑鼠放上去的動畫，滑鼠離開的反著進行即可）

先點mask1左邊的小三角展開，點mask path前的小秒錶給mask path打上一個關鍵幀。同時右邊時間軸上多了一個菱形(關鍵幀)。

接著我們把指示當前時間的指標拖到第17幀，就不要再動它了。

在工具欄中指標選中的情況下，拖動遮罩的不在三角形上的三個頂點，拖到三角形邊上。(遮罩頂點開始是全選中，在空白處單擊一下再一個個地拖動頂點)

得到這個比較醜的東西后，調整頂點切線的方向，調出三角形。切線兩邊是一起動的，按住alt拖動就單獨動了。

圓形到三角形的變換搞定了，按空格播放預覽一下。

7）還是比較醜。接下來加上旋轉。

時間指標先拖到第18幀（即17f 處，因為是從0開始的），正三角形的圖片用不到了已經，刪掉，選中figure層按R鍵，旋轉90°，點小秒錶打上關鍵幀。

然後指標拖到第一幀，再改一下數值。-1X+0.0°  也就是逆時針一圈

空格預覽一下，還是醜的一逼。

動畫是線性的，給人感覺太 →_→“剛烈”了，按住shift點選兩個菱形關鍵幀，按F9，菱形變成了沙漏形，這樣動畫就ease in ease out 了

如果對預設的ease in ease out不滿意，可以選中關鍵幀然後點選時間軸旁邊的三角函式曲線似的圖示，通過拖動切線來得到滿意的動畫速度曲線。

三角形的頂點太尖銳了，改圓潤一些。（注意時間指標要拖到17f 處再改，不然就自動在別處打關鍵幀了。）

9）接下來我們加上縮放。按S，在0幀處打上關鍵幀，調整圓形大小直到覆蓋灰色部分。

接著在17幀處也調整大小，這裡我設定為70%。

接著在17幀前面每隔1幀（9、11、13、15）設定一個scale的值，這樣四個關鍵幀分別為60%、80%、65%、75%，這四個關鍵幀都是漏斗形的，全部選中後按住ctrl用滑鼠點選一下變成菱形。

同樣的方法給旋轉屬性在9、11、13、15幀也設定一下數值打上關鍵幀（110°、80°、100°、85°），同樣這四個改回菱形。最終我們會得到一種彈彈的效果。預覽一下效果。

當然如果不想要這種Q彈的感覺，這步跳過不做。

10）退出效果就相當簡單了，把指標拖到最後一幀，然後選中第一幀的三個屬性的關鍵幀，ctrl+c 再ctrl + v。OK。

11）動畫基本完成了，接下來調整一下透明度。選中兩層，按ctrl+shift+C 預合成，點選確定，

然後選中這個預合成，按T鍵調出透明度屬性，在0幀和17幀處分別打上關鍵幀，設定合適的數值（10%、80%），同樣在最後一幀打上關鍵幀，設定透明度10%。，調整動畫曲線，得到淡進淡出的效果。

最後為了更好地預覽效果，我們匯入一張背景圖片。把它放在pre-comp1裡面BG層的下面，修改bg層透明度為50%，figure層為80%。選中bg層按ctrl + shift + Y 把顏色改為純白色。

接下來回到hoverEffect合成，按空格預覽一下。

12）效果不錯，那就刪掉背景圖片，輸出PNG序列吧！終於到這一步了！

選擇選單欄中的composition（合成）選擇add to render queue

然後下面出現了這麼個玩意：

點那金黃的字lossless，這裡format選擇為PNG Sequence ，Channels選擇RGB+Alpha （這步相當重要，不然就得不到帶有透明度資訊的PNG了）。點選確定。

然後還是點選金黃的字：Not yet specified，指定輸出路徑。我新建了一個hoverEffect資料夾，序列的名字為hoverEffect_[#####].png，

取消勾選save in subfolder。點選儲存。

最後的最後！點選右側的Render，幾秒鐘就輸出完成了。

是它們！就是它們！多麼可愛。