雪碧图css-精灵地图的最佳实践

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

对于网络开发人员来说，处理网站上的小图标并不罕见。 为了减少请求次数，提高加载速度，将小图标合并成大图，然后借助相关技术将必要的图标部分显示出来。 市面上最常用的小图标解决方案有两种：

图标字体不是明天讨论的范围。 明天主要讲解下雨地图的基本原理和几种常见的实现方案，最后给出笔者认为比较高效的精灵地图的开发流程。

什么是精灵贴图

Sprite image是一种css图像合成技术，通过CSS的background-image（为元素设置背景图片）和background-position（设置背景图片的起始位置）属性来显示图像中需要的部分显示。

如果我们在Photoshop上将四个图标排列如右图所示，并将它们导入到合并的大图像（icons.png）中。

这样通过css样式定位时的坐标系为：内块元素左上角为(0, 0)点，向右方向为x轴正方向，向上方向为y 轴的正方向。 因为background-position的作用是设置背景图片的起始位置，默认的起始坐标是(0, 0)，如果我们想只显示图片中从左数第二个红色图标，那么我们需要set 整个背景图片向左倾斜60像素，整个块元素的规格设置为红色图标的大小。 关键样式如下：

background-image: url("icons.png");
background-position: -60px 0px;
width:50px;
height:50px;

可见，实现精灵图像有两个关键：

下面将阐述实现上述技术的几种方案。

选项 1：Photoshop 自动拼贴

如右图所示，我们将所有需要打包的图标推送到Photoshop编辑器中，然后它们就会自动排版。 借助标尺和参考线获取每个图标的坐标和大小。 还可以选择特定的图标视口，使用快捷键ctrl+T弹出信息面板，查看视口信息。 最后根据坐标信息编译出相应的样式文件。

合并的大图像文件 (icons.png)

对应的样式文件（icons.css）如下：

.icon1{
    background-image: url("icons.png");
    background-position: 0px 0px;
    width:50px;
    height:50px;
}
.icon2{
    background-image: url("icons.png");
    background-position: -60px 0px;
    width:50px;
    height:50px;
}
.icon_mobile{
    background-image: url("icons.png");
    background-position: -114px -10px;
    width:26px;
    height:32px;
}
.icon_pc{
    background-image: url("icons.png");
    background-position: -156px -10px;
    width:32px;
    height:30px;
}

优势

缺点

方案二：TexturePacker打包+lesssassscss混合+koala（推荐）工具引入

TexturePacker是一款优秀的纹理打包工具，可以将分散的图片打包成大图，并生成对应的小图标坐标规格等配置信息。 现在被许多游戏开发团队广泛使用来创建丰富的逐帧动画角色和特效动画。 这个工具非常通用且功能强大。 以下是它的一些功能：

Koala 是一款后端预处理语言图形编译工具，支持 Less、Sass、Compass 和 CoffeeScript，帮助 Web 开发者更高效地使用它们进行开发。 跨平台操作，完美兼容windows、linux、mac。

TexturePacker精灵图片制作

为了方便说明，我们创建一个简单的Html项目SpriteSheetDemo作为演示（下面提到的相对目录是相对于项目SpriteSheetDemo的根目录），其目录结构如下：

默认情况下，假设您已经安装了前面两个工具：TexturePacker 和 koala。

步骤1

我们将所有需要打包成精灵图片的图标放在项目的资源/图标下（实际项目中建议根据不同的功能模块将图标分类到不同的文件夹中进行管理）

第二步

打开TexturePacker，将resources/icons整个文件夹push到TexturePacker中，如右图：

从左侧的输出区域中，选择“数据格式”为“LESS (css)”； 单击工具栏上的“保存”按钮，将弹出一个对话框，供您选择导入配置的保存位置。 我们将其保存在resource/icons.tps下。 该工具默认会将导入的大图和less文件设置到同级目录（resource/icons.png和resource/icons.less）； 我们分别单击Output区域中的Datafile和Texturefile，将导入目录更改为src/style/sprite-sheet目录。 向下。 再次点击工具栏上的保存按钮； 其他配置项可以根据个人需求选择，然后点击工具栏上的Publish，发布精灵图片icons.png和对应的配置文件icons.less；

这样我们就可以轻松获得Sprite图像和less配置文件的组合图像。 让我们看看导入的 icon.less 文件是什么样子的：

//
// Created with TexturePacker http://www.codeandweb.com/texturepacker
//
// SmartUpdateHash: $TexturePacker:SmartUpdate:be14779bf468d72868854392203de820$
//
.sprite-icons { display:inline-block; overflow: hidden; background-repeat: no-repeat; background-image: url('icons.png'); }
.icons-ipad_hover { width: 26px; height: 32px; background-position: -36px -70px; }
.icons-ipad_normal { width: 26px; height: 32px; background-position: -36px -36px; }
.icons-ipad_selected { width: 26px; height: 32px; background-position: -36px -2px; }
.icons-pc_hover { width: 32px; height: 30px; background-position: -2px -66px; }
.icons-pc_normal { width: 32px; height: 30px; background-position: -2px -34px; }
.icons-pc_selected { width: 32px; height: 30px; background-position: -2px -2px; }

按理说，到目前为止我们就可以在项目中使用上面的icons.less进行开发了。 而且我发现现在生成的文件不少都是混合文件，尤其是同一个图标（比如iPad）不同状态（正常、悬停、选中）的切换不好处理。 这里我们使用TexturePacker的自定义导入格式，并且我们自定义了一个less-mixins的导入格式来满足我们的要求。 提供了自定义导入格式的详细说明；

自定义less-mixins的导入格式到TexturePacker安装目录下的exporters目录中，如：D:ProgramFiles(x86)CodeAndWebTexturePackerbinexporters； 将 less 文件夹复制到同级目录，并重命名为 less-mixins ；

进入 less-mixins 目录并将其中的 exporter.xml 更改为如下所示：

<exporter version="1.0">
    
    <name>less-mixins</name>
    
    <displayName>LESS-mixins (css)</displayName>
    
    <description>Creates a LESS mixins file that can be incorporated into a sprites arrangement</description>
    
    <version>1.0</version>
    
    <files>
        <file>
            
            <name>less</name>
            
            <displayName>LESS file</displayName>
            
            <fileExtension>less</fileExtension>
            
            <template>sprites.less</template>
        </file>
    </files>
    
    <supportsTrimming>true</supportsTrimming>
    
    <supportsRotation>false</supportsRotation>
    
    <rotationDirection>cw</rotationDirection>
    
    <supportsNPOT>true</supportsNPOT>
    
    <supportsTrimSpriteNames>yes</supportsTrimSpriteNames>
    
    <supportsTextureSubPath>no</supportsTextureSubPath>
</exporter>

4. 将 sprites.less 文件更改为如下所示：

//
// Created with TexturePacker, Don't edit this less mixins file.
// Author: txiejun
// Contact:txiejun@126.com
// SmartUpdateHash: {{smartUpdateKey}}
//
{% load makecssselector %}
.d-{{texture.trimmedName}}() { display:inline-block; overflow: hidden; background-repeat: no-repeat; background-image: url('./sprite-sheet/{{texture.fullName}}'); }
{% for sprite in sprites %}
.{{texture.trimmedName}}-{{sprite.trimmedName|makecssselector}}() { width: {{sprite.frameRect.width}}px; height: {{sprite.frameRect.height}}px; background-position: -{{sprite.frameRect.x}}px -{{sprite.frameRect.y}}px; }{% endfor %}

5、关闭之前打开的TexturePacker界面，步入并双击resource/icons.tps文件，就会手动打开TexturePacker界面；

6、在左侧Output区域选择DataFormat下拉框，你会发现已经添加了我们刚才自定义的导入格式：LESS-mixins(css)；

7、选择LESS-mixins(css)选项并点击工具栏上的Save按钮，然后点击工具栏上的Publish按钮重新发布；

重新生成的自定义icons.less sprite配置文件如下：

//
// Created with TexturePacker, Don't edit this less mixins file.
// Author: txiejun
// Contact:txiejun@126.com
// SmartUpdateHash: $TexturePacker:SmartUpdate:9234b80f33e9d89246acc0adce0c8ad8$
//
.d-icons() { display:inline-block; overflow: hidden; background-repeat: no-repeat; background-image: url('./sprite-sheet/icons.png'); }
.icons-ipad_hover() { width: 26px; height: 32px; background-position: -36px -70px; }
.icons-ipad_normal() { width: 26px; height: 32px; background-position: -36px -36px; }
.icons-ipad_selected() { width: 26px; height: 32px; background-position: -36px -2px; }
.icons-pc_hover() { width: 32px; height: 30px; background-position: -2px -66px; }
.icons-pc_normal() { width: 32px; height: 30px; background-position: -2px -34px; }
.icons-pc_selected() { width: 32px; height: 30px; background-position: -2px -2px; }

下面将通过项目SpriteSheetDemo演示如何使用生成的Sprite图像。

精灵图像的使用

步骤1

在src/style目录下新建样式文件app-less.less，具体内容如下：

/**
* Author: txiejun
* Contact:txiejun@126.com
* Time: 2017/8/17 19:27
*/
//app 样式定义
@import "sprite-sheet/icons.less";
.d-app{
  height:500px;
  .tab-list{
    margin:10px 50px;
    .tab-item{
      display: inline-block;
      vertical-align: middle;
      text-align: left;
      font-size: 14px;
      margin-right:20px;
      padding:4px;
      border-radius:6px;
      border:1px solid #B6C2F6;
      .item-icon{
        float: left;
      }
      p{
        float: left;
        color: #333;
        line-height: 32px;
        height:32px;
        margin:0 5px;
      }
      //普通状态
      .icon-pc{
        .d-icons();
        .icons-pc_normal();
      }
      .icon-ipad{
        .d-icons();
        .icons-ipad_normal();
      }
      //hover状态
      &:hover{
        p{
          color: #dd2222;
        }
        .icon-pc{
          .icons-pc_hover();
        }
        .icon-ipad{
          .icons-ipad_hover();
        }
      }
      //选中状态
      &.selected{
        p{
          color: #39cc11;
        }
        .icon-pc{
          .icons-pc_selected();
        }
        .icon-ipad{
          .icons-ipad_selected();
        }
      }
    }
  }
}

关键点

.icon-pc{
  .d-icons();
  .icons-pc_normal();
}

由于我们对样式中的小图标使用了 less 变量 .icons-pc_normal()，因此我们可以随后减少或删除一些图标雪碧图css，而不会影响其他图标的使用。

第二步

启动koala软件，将src/style目录推入koala主界面，如下图。 点击刷新或者选择less文件，点击编译生成对应的css文件。

第三步

在src目录下新建app.js文件，相关内容如下：

/**
 * Author: txiejun
 * Contact:txiejun@126.com
 * Time: 2017/8/17 17:32
 */
//demo入口
$(function () {
    var selectedTab = null;
    $(".tab-item").on("click", function (evt) {
        if(evt.currentTarget!=selectedTab){
            if(selectedTab){
                $(selectedTab).removeClass("selected");
            }
            selectedTab = evt.currentTarget;
            $(selectedTab).addClass("selected");
        }
    })
})

关键点

第四步

在项目根目录下新建index.html雪碧图css，相关内容如下：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>雪碧图演示</title>
        <meta name="renderer" content="webkit">
        <link rel="stylesheet" href="./src/style/app-less.css">
    </head>
    <body>
        <div class="d-app">
            <div class="tab-list">
                <a href="javascript:;" class="tab-item J_pc">
                    <i class="item-icon icon-pc"></i>
                    <p>电脑</p>
                </a>
                <a href="javascript:;" class="tab-item J_ipad">
                    <i class="item-icon icon-ipad"></i>
                    <p>iPad</p>
                </a>
            </div>
        </div>
        <script type="text/javascript" src="./src/libs/jquery-3.2.1.js"></script>
        <script type="text/javascript" src="./src/app.js"></script>
    </body>
</html>

关键点

启动项目

本项目需要安装Node.js和npm相关环境。 默认情况下，假设您已经安装了相关环境。

1、进入SpriteSheetDemo项目根目录，执行命令npminstallhttp-server-g；

2、执行命令npmstart启动项目服务；

3、在浏览器中输入：，不出意外的话会显示如下内容：

关键点

至此，通过TexturePacker开发精灵贴图的过程就结束了。

优势

快速轻松地减少、删除和更新图标；

可以手动导入组合图片和小图标的坐标配置，大大提高开发效率； 使用门槛低； 耦合度低； 对导入图片格式和质量的控制非常灵活； 根据算法导入最优的图片排列和规格，小图标之间的排列非常紧凑； 方案3：gulp.spritesmith/webpack-spritesmith（待研究）

gulp.spritesmith 使用 gulp 手动工具将图像集合转换为 sprite 图像以及 css、sass 和 less blending 等配置；

webpack-spritesmith 是一个 webpack 插件，可以将图像集合转换为 sprite 图像以及 css、sass 等混合配置。 主要灵感来自gulp.spritesmith；

具体使用方法可以直接参考官方文档，这里不再详细介绍（虽然还没有深入研究）；

优势

缺点

总结

以上三种方案是笔者目前了解到的最常见的精灵实现方案。

如果还有其他更好的精灵方案，欢迎补充；

演示项目地址下载