雪碧图的魔力：优化CSS动画场景
什么是雪碧图
雪碧图（CSS Sprites），是一种网页图像处理技术，它将多个小图标或图像合并成一个大的图像文件。这种方法允许浏览器通过一次HTTP请求加载多个图像，而不是为每个小图标单独发起请求。雪碧图通常用于网页设计中的图标、按钮和其他装饰性元素。
雪碧图其优点主要体现在：
1. 减少HTTP请求，提高页面性能，优化用户体验
2. 简化CSS代码，易于实现动画效果，兼容性和响应式设计
3. 减少服务器负载，并且浏览器可以更高效的缓存它
雪碧图制作工具
推荐gka 动画生成工具 使用简单，文档清晰，且不像一般雪碧图在线生成一样具有上传文件数量限制 gka官方文档
使用条件：本地安装node
应用案例
将UI给出的多个帧图片合成为一个雪碧图，并通过CSS关键帧的方式实现动画
操作步骤
1. 首先安装gka
npm i gka -g2. 运行gka，将指定目录下的文件制作为雪碧图
gka dir [options]个人目前用到最多的配置是 -ums u： 相同图片复用优化 m： 图片压缩 s： 合图优化
3. 等待命令执行完成，查看生成结果
可以看到被合成到一起的雪碧图
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1">
<script name='gkaRibbon'>document.addEventListener('DOMContentLoaded',function(){var d=document.createElement('div');d.innerHTML='<div style="position: fixed; bottom: 10px;">Powered By <a target="_blank" href="https://github.com/gkajs/gka">gka 2.8.7</a></div>';document.body.appendChild(d)});</script>
<title>gka-preview</title>
<link href="./gka.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="gka-wrap">
<div id="gka"></div>
</div>
<script>
function preloadImage(names, cb, prefix){
window.gkaCache = window.gkaCache || [];
var n = 0,img,imgs = {};
names.forEach(function(name) {
img = new Image();
window.gkaCache.push(img);
img.onload = (function(name, img) {
return function() {
imgs[name] = img;
(++n === names.length) && cb && cb(imgs);
}
})(name, img);
img.src = (prefix || '') + name;
});
}
preloadImage(["sprites.png"], function() {
document.getElementById('gka').className += " animation"
}, "img/")
</script>
</body>
</html>gka.css
.gka-wrap {
width: 1000px;
height: 1000px;
}
.animation {
width: 1000px;
height: 1000px;
background-image: url("./img/sprites.png");
background-size: 232000px 1000px;
background-repeat: no-repeat;
animation-name: keyframes-Loading;
animation-duration: 10.68s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: steps(1);
}
@keyframes keyframes-Loading {
0% {
width: 1000px;
height: 1000px;
background-image: url("./img/sprites.png");
background-size: 232000px 1000px;
}
0.37% {
background-position: -1000px 0px;
}
0.75% {
background-position: -2000px 0px;
}
1.12% {
background-position: -3000px 0px;
}
// ...
99.25% {
background-position: -230000px 0px;
}
99.63%,
100% {
background-position: -231000px 0px;
}
}
