最近很多網(wǎng)站上都經(jīng)常使用到GIF圖片,它們常常用于表情包、動(dòng)畫圖標(biāo)、廣告、漫畫等應(yīng)用。但是在前端場景中,GIF圖片經(jīng)常需要轉(zhuǎn)換成Json的格式來進(jìn)行優(yōu)化。
這里為大家介紹最常用的一種GIF轉(zhuǎn)JSON的方法,首先需要安裝一個(gè)工具——gif-to-json:
npm install -g gif-to-json
安裝完成之后,我們就可以使用該工具來將GIF圖片轉(zhuǎn)換成Json格式了:
gif-to-json input.gif [output.json]
其中,input.gif表示需要轉(zhuǎn)換的GIF圖片,output.json為輸出的JSON文件名,可選參數(shù),若不指定則下面指令中的“spriteSheetName”將不會(huì)起作用。
除此之外,該命令還支持其他一些選項(xiàng),如:
--spriteSheetName=num 設(shè)置Json中Sprites屬性值的名稱,默認(rèn)為sprites。 --pretty 以可讀性良好的格式輸出Json代碼。
比如我們想修改Sprites屬性的名稱,可以在指令中加上--spriteSheetName選項(xiàng):
gif-to-json input.gif output.json --spriteSheetName=spriteJson
轉(zhuǎn)換完成之后,就可以在瀏覽器中使用Json格式的數(shù)據(jù)了。例如可以使用EaselJS庫來加載Json文件,然后把GIF圖片渲染出來:
let ss = new createjs.SpriteSheet(spriteJson); let anim = new createjs.Sprite(ss); stage.addChild(anim); createjs.Ticker.addEventListener("tick", stage);
這樣在我的網(wǎng)站上就可以愉快地玩耍動(dòng)畫啦!