「CSS3」ImageMagick - 從gif建立雪碧圖動畫 - Sprite Sheet Ani

Acceml 發(fā)布于2019-08-29 12:46 / 3271人閱讀

摘要：由于圖片是根據(jù)一定的方式進行編碼的，有的時候對于同一幅圖片，垂直拼接和水平拼接后的圖片體積可能會差異比較大，最好都生成一幅，然后進行選定素材及地址最后附上雪碧圖動畫的運行，有和兩種方式，并可以進行暫停加速減速反向操作戳

ImageMagick

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

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

ImageMagick 對平臺和語言的支持都十分完善，基本上支持現(xiàn)在流行的所有語言，即使不支持你現(xiàn)在所使用的語言，直接通過命令行調用 magick 命令也是非常方便的。

安裝ImageMagick的步驟我就不贅述了，大家根據(jù)自己的平臺來下載相應的二進制包，->傳送門<-

雪碧圖動畫

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

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

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

雪碧圖稍大的體積絕對配的上它的優(yōu)點：

暫停播放

方便控制播放速度和播放速度的時間函數(shù)

控制播放順序和次數(shù)

如果你需要對動畫效果進行控制的話，使用雪碧圖不失為一種好方法，否則還是使用gif降低圖片體積。

ImageMagick 將gif轉換為png

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

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

-coalesce 表示將gif每一幀都補全為完整的一副圖。由于為了壓縮體積，gif每一幀的數(shù)據(jù)都是在前一幀的數(shù)據(jù)上進行增量覆蓋。所以如果直接提取出每一幀的話，則會得到一組殘缺不全的圖片，大家可以去掉該參數(shù)試一試。

+append 表示將提取出來的一組圖片按照水平方式拼接起來，-append 則是按照垂直方式拼接起來。

由于圖片是根據(jù)一定的方式進行編碼的，有的時候對于同一幅gif圖片，垂直拼接和水平拼接后的圖片體積可能會差異比較大，最好都生成一幅，然后進行選定

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

DEMO

最后附上雪碧圖動畫的運行DEMO，有CSS和CSS3兩種方式，并可以進行暫停、加速、減速、反向操作

戳-> Github: JasonKid fezone ImageMagick

GPU云服務器云服務器雪碧圖 html使用雪碧圖 css3動畫 Gif加載動畫

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/112129.html

CSS3動畫之逐幀動畫

摘要：什么是逐幀動畫要了解逐幀動畫，首先要明確什么是逐幀動畫。簡而言之，實現(xiàn)逐幀動畫需要兩個條件相關聯(lián)的不同圖像，即動畫幀連續(xù)播放。因此在觸屏頁面中逐幀動畫使用廣泛，下文將對其進行詳細介紹。因此，逐幀動畫也被稱為精靈動畫。什么是逐幀動畫要了解 CSS3 逐幀動畫，首先要明確什么是逐幀動畫。看一下維基百科中的定義：定格動畫，又名逐幀動畫，是一種動畫技術，其原理即將每幀不同的圖像連續(xù)播放，...

RancherLabs 2019-08-30 15:43 評論0 收藏0
利用 CSS animation 和 CSS sprite 制作動畫

摘要：今天給大家介紹一個使用配合雪碧圖來制作動畫的方法，可以做出類似于動畫的效果。利用雪碧圖來制作動畫使用了里面的一個重要的函數(shù)。 CSS3 大大強化了制作動畫的能力，但是如果要做出圖案比較復雜的動畫，選擇 GIF 依然是一個不錯的選擇。今天給大家介紹一個使用 CSS animation 配合雪碧圖(CSS sprite)來制作動畫的方法，可以做出類似于 GIF 動畫的效果。 CSS3 An...

陳偉 2019-08-28 18:08 評論0 收藏0
淺探前端圖片優(yōu)化

摘要：性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會注意圖片的使用，圖片使用不當可能會導致網(wǎng)頁加載卡頓網(wǎng)頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會注意圖片的使用，圖片使用不當可能會導致網(wǎng)頁加...

CocoaChina 2019-08-30 15:54 評論0 收藏0
淺探前端圖片優(yōu)化

摘要：性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會注意圖片的使用，圖片使用不當可能會導致網(wǎng)頁加載卡頓網(wǎng)頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會注意圖片的使用，圖片使用不當可能會導致網(wǎng)頁加...

X1nFLY 2019-08-23 14:14 評論0 收藏0
CSS3幀動畫

摘要：在制作幀動畫的時候，一般采用雪碧圖的方式，通過切換圖片的位置，使其連續(xù)播放，從而形成動畫。使用改造之后的代碼，利用偽類進行背景填充，然后控制該元素移動來實現(xiàn)逐幀動畫。在制作幀動畫的時候，一般采用雪碧圖的方式，通過切換圖片的位置，使其連續(xù)播放，從而形成動畫。雪碧圖雪碧圖的制作可以使用compass制作，還可以使用一些小工具進行制作，提供一個在線制作雪碧圖的網(wǎng)站。CSS Sprite...

Nino 2019-08-30 15:53 評論0 收藏0