国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

「CSS3」ImageMagick - 從gif建立雪碧圖動(dòng)畫 - Sprite Sheet Ani

Acceml / 3253人閱讀

摘要：由于圖片是根據(jù)一定的方式進(jìn)行編碼的，有的時(shí)候?qū)τ谕环鶊D片，垂直拼接和水平拼接后的圖片體積可能會(huì)差異比較大，最好都生成一幅，然后進(jìn)行選定素材及地址最后附上雪碧圖動(dòng)畫的運(yùn)行，有和兩種方式，并可以進(jìn)行暫停加速減速反向操作戳

ImageMagick

ImageMagick 是當(dāng)前非常流行的一個(gè)圖像處理庫(kù)，一些大型的公司，例如Facebook、雅虎等都在使用 ImageMagick 對(duì)用戶上傳的圖像進(jìn)行處理。

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

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

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

雪碧圖動(dòng)畫

雪碧圖動(dòng)畫指的是，將一個(gè)動(dòng)畫所需要的所有幀平鋪（或橫或豎）排列在一張圖片上，當(dāng)動(dòng)畫運(yùn)行時(shí)，較短時(shí)間內(nèi)改變其容器的 background-position，得到動(dòng)畫播放的效果。

下圖是bilibili點(diǎn)擊收藏按鈕的動(dòng)畫效果及其雪碧圖（GIF是筆者根據(jù)雪碧圖來(lái)進(jìn)行合成的）


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

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

暫停播放

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

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

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

ImageMagick 將gif轉(zhuǎn)換為png

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

就是如上一條指令，接下來(lái)解釋一下上面的指令：

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

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

由于圖片是根據(jù)一定的方式進(jìn)行編碼的，有的時(shí)候?qū)τ谕环鵪if圖片，垂直拼接和水平拼接后的圖片體積可能會(huì)差異比較大，最好都生成一幅，然后進(jìn)行選定

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

DEMO

最后附上雪碧圖動(dòng)畫的運(yùn)行DEMO，有CSS和CSS3兩種方式，并可以進(jìn)行暫停、加速、減速、反向操作

戳-> Github: JasonKid fezone ImageMagick

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112129.html

相關(guān)文章

  • CSS3動(dòng)畫之逐幀動(dòng)畫

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

    RancherLabs 評(píng)論0 收藏0

  • 利用 CSS animation 和 CSS sprite 制作動(dòng)畫

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

    陳偉 評(píng)論0 收藏0

  • 淺探前端圖片優(yōu)化

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

    CocoaChina 評(píng)論0 收藏0

  • 淺探前端圖片優(yōu)化

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

    X1nFLY 評(píng)論0 收藏0

  • CSS3幀動(dòng)畫

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

    Nino 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<