css精靈圖寫序列幀動畫
阿新 • • 發佈:2019-01-14
最近寫一個H5要求序列幀動畫比較多,但是卻僅僅是作為裝飾,而不對其進行操作,為了減小記憶體以及更好的效能選擇了css動畫+css精靈圖的方式。
1.找工具製作css精靈圖。
聽說Win系統的css sprite很好用,可惜mac系統不行,所以先安利大家一個外掛:gulp.spritesmith,用gulp作為構建工具,可以獲得css樣式檔案,css generator也行,但個人感覺這個更快,並且生成css檔案直接引用會特別方便。以下是程式碼:
var gulp = require('gulp') var spritesmith = require('gulp.spritesmith') gulp.task('sprite', function () { gulp.src('./images/*.png').pipe(spritesmith({ imgName: 'images/main.png', //合成後的圖片命名 cssName: 'css/main.css', //合成後的圖示樣式 padding: 0, //雪碧圖中兩圖片的間距 algorithm: 'binary-tree' //分為top-down、left-right、diagonal、alt-diagonal、binary-tree(可實際操作檢視區別) })).pipe(gulp.dest('assets')) //圖片、樣式輸出到該資料夾 });
記得安裝依賴。
執行gulp sprite後會在images資料夾下生成一張精靈圖,在css資料夾下生成對應的樣式檔案。
2.寫序列幀動畫
這裡運用到的最重要的就是animation中的steps函式。
先說下steps函式: steps 函式指定了一個階躍函式,第一個引數指定了時間函式中的間隔數量(必須是正整數);第二個引數可選,接受 start 和 end 兩個值,指定在每個間隔的起點或是終點發生階躍變化,預設為 end。
假如你合成的圖片尺寸是100x4000,幀數是10,那麼你就可以這樣定義一個動畫:
@keyframes mainAnime { to { background-position: 0x -4000px; } }
然後在樣式中使用:
animation: mainAnime steps(10) 1000ms infinite;
動畫就動起來了,可以節省很多空間及效能。
本文完。