介紹一個導出CSS精靈圖動畫的AE腳本

04-01

最近越來越多的朋友諮詢CSS Sprite Exporter這個腳本的問題，雖然之前簡單介紹過它，但是不是很詳細，現在更新一個中文版的腳本，再重新稍微詳細介紹一下。本文原載網易實踐者社區。

在H5項目中如果有動畫需求，一個常見的流程是設計師用 After Effect 製作動畫，然後導出為序列幀。

序列幀就是一張張圖片，快速連續播放就能成為動畫，但是在H5里直接播放序列幀對網路性能不是很友好，有可能會造成卡頓或者丟幀，所以通常還會將其拼接成一張大圖，即「精靈圖」或者「雪碧圖」（sprite image）。

拼精靈圖可以用PS、Sketch等圖像處理工具手工拼接，也可以找一些專門的工具製作。拼完之後，還需要根據動畫的時長、幀率、尺寸等參數寫相應的代碼，比較常見的是寫成CSS代碼來使用。

具體怎麼用的可以參考這篇文章：

https://aotu.io/notes/2016/05/17/css3-animation-frame/

當動畫量很大，或者需要頻繁修改的時候，這個流程就會比較繁瑣，在這裡和大家介紹一下我寫的一個AE腳本，可以一鍵導齣動畫為CSS精靈圖及代碼，不需要先導出序列幀再拼接了。

先簡單介紹一下什麼是AE腳本。

AE是一款強大的動畫製作軟體，內置了豐富的功能，同時也提供了一定的外部擴展能力，可以讓用戶基於軟體提供的介面自己做一些「擴展」。

目前來說AE的「擴展」分三種：

插件（plug in）、腳本（script）、擴展程序（extension）

其中「腳本」可以理解為用一些命令調用AE本身的功能來組合施展，提高效率，後綴名是.jsx或者.jsxbin。

如何安裝：

點這裡下載壓縮包.然後解壓，找到 CSS-Sprite-Exporter.jsx 文件。

打開AE, 點擊 文件->腳本->運行腳本文件... 然後選擇剛才下載的 CSS-Sprite-Exporter.jsx。

或者可以複製 CSS-Sprite-Exporter.jsx 到AE的腳本文件夾:

Windows: C:Program FilesAdobeAdobe After Effects <版本>Support FilesScript Mac: /Applications/Adobe After Effects <版本>/Scripts/

這樣你就可以從 文件->腳本 中直接選擇CSS-Sprite-Exporter了

詳細步驟可以看這裡

這也是很多腳本的通用安裝/運行方法。

使用方法：

1. 在 AE 中製作需要導出的動畫。

2. 運行 CSS-Sprite-Exporter.jsx ，界面大概是這樣：

3.設置好參數，點擊「生成」導出，如果沒有意外，就會幫你打開到該動畫導出的文件夾。各參數的意義如下：

最大寬度：當圖片第一行拼接後寬度達到這個值，就會折到下一行繼續拼接，默認是5000像素。
web兼容性：為了兼容一些舊的瀏覽器，如果項目有這個需求可以勾選，具體需要研發同學評估，默認沒有勾選
CSS樣式設置中的「ID名」指定了在頁面中這個元素的「ID」，需要遵循CSS的命名規範，可以先保留默認導出給研發後讓研發統一指定。
「動畫名」指定了該元素的對應關鍵在動畫的命名，也需要遵循CSS的命名規範，可以先保留默認導出給研發後讓研發統一指定。
跳幀：如果動畫幀數太多可以嘗試用這個參數減少幀數，即「跳過xx幀」的意思，默認是不跳幀。

導出的CSS代碼示例：

#mySprite { /*導出時指定的「ID名」*/ background-image: url(images/boom.png);/*精靈圖路徑*/ width: 500px; height: 500px; /*導出時指定的「動畫名」*/ animation: myAnimation 1.42s steps(1) infinite;}@keyframes myAnimation { 0% { background-position: 0px 0px; } 2.94% { background-position: -500px 0px; } 5.88% { background-position: -1000px 0px; } 8.82% { background-position: -1500px 0px; } …… /*此處省略，一直到100%*/ …… 97.06% { background-position: -1500px -1500px; } 100.00% { background-position: -2000px -1500px; }}

4.打開「預覽_XXX.html」文件（建議用 chrome 打開），預覽導出的動畫。