「CSS3」ImageMagick - 從gif創建雪碧圖動畫 - Sprite Sheet Animation

ImageMagick

ImageMagick 是當前很是流行的一個圖像處理庫，一些大型的公司，例如Facebook、雅虎等都在使用 ImageMagick 對用戶上傳的圖像進行處理。

ImageMagick 基本上能夠支持全部的基礎圖像處理，例如尺寸、亮度、灰度的改變，濾鏡和特效的添加，圖片格式轉換，製做gif或者扁平化gif...基本上你所能想到的全部基礎圖片操做，它都能作到。

ImageMagick 對平臺和語言的支持都十分完善，基本上支持如今流行的全部語言，即便不支持你如今所使用的語言，直接經過命令行調用 magick 命令也是很是方便的。

安裝ImageMagick的步驟我就不贅述了，你們根據本身的平臺來下載相應的二進制包，->傳送門<-

雪碧圖動畫

雪碧圖動畫指的是，將一個動畫所須要的全部幀平鋪（或橫或豎）排列在一張圖片上，當動畫運行時，較短期內改變其容器的 background-position，獲得動畫播放的效果。

下圖是bilibili點擊收藏按鈕的動畫效果及其雪碧圖（GIF是筆者根據雪碧圖來進行合成的）

GIF圖大小爲27KB，雪碧圖大小爲53KB

雪碧圖稍大的體積絕對配的上它的優勢：

• 暫停播放
• 方便控制播放速度和播放速度的時間函數
• 控制播放順序和次數

若是你須要對動畫效果進行控制的話，使用雪碧圖不失爲一種好方法，不然仍是使用gif下降圖片體積。

ImageMagick 將gif轉換爲png

$ convert star.gif -coalesce +append star.practice.png

就是如上一條指令，接下來解釋一下上面的指令：

• -coalesce 表示將gif每一幀都補全爲完整的一副圖。因爲爲了壓縮體積，gif每一幀的數據都是在前一幀的數據上進行增量覆蓋。因此若是直接提取出每一幀的話，則會獲得一組殘缺不全的圖片，你們能夠去掉該參數試一試。
• +append 表示將提取出來的一組圖片按照水平方式拼接起來，-append 則是按照垂直方式拼接起來。

因爲圖片是根據必定的方式進行編碼的，有的時候對於同一幅gif圖片，垂直拼接和水平拼接後的圖片體積可能會差別比較大，最好都生成一幅，而後進行選定

素材及DEMO地址：https://github.com/JasonKid/f...

DEMO

最後附上雪碧圖動畫的運行DEMO，有CSS和CSS3兩種方式，並能夠進行暫停、加速、減速、反向操做

戳-> Github: JasonKid fezone ImageMagick