Sprite动画在移动H5页面落地解析-【特殊改版点】

Sprite动画在移动H5页面落地解析_你的军哥-站酷ZCOOL

作者根据实战经验总结的落地经验贴，阅读大概需要20分钟

精灵图是什么？

精灵的英文叫做Sprite，Sprite也是雪碧的意思，故也称为“雪碧图”。

精灵图就是把很多张小图整合到一张大图的方式，如下图所示：

精灵图在早期网页中的应用

说到web端的应用，我们先看下早期网页接受图片的原理：

每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。

举个例子，我们来看一下下面的门户网站，头部有很多很多的图标icon，我们每次打开或者刷新，每个都需要加载一遍，

比如上面一张图，在早期（比如在05年左右）的pc端我们可以看到最上方有接近40个icon，这类型的网页比比皆是，除了这种类型的网站，还有很多图片占比很大的门户网站，在15年前，加载起来会很慢，等待一个网页要用几秒甚至十几秒的时间，基本达不到秒开，原因是因为每个icon切图都有一次先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果这个网页有大几十甚至上百个小图的话，就要对应加载上百次。再加上那会儿网速带宽很慢（那时候好像只有2M，最快也就10M的网速），如果加载上百个小图的话，可想而知等待时长：

下面我们来看一下早些年网速和现在网速的对比图，大家就有所了解了：

当然，现在是很快了，基本每个icon和元素都在100ms以内，大部分都在0ms，可以说是瞬间加载完毕。但是在早期，可能每个icon切图等待时长都在300ms甚至500ms（这里的时间单位是大概），那么比如一个小icon加载时间需要100ms，100张图分别一个个加载就是10000ms（换算：1s=1000ms），100张图的网页等待时长就是10s。同时加载的话，大概也要等待4-5s的时间。

那么与此同时，精灵图出现了，设计师把网页中用到的所有切图都放到了同一张图片上，利用插件或者网页端工具导出格式文件，前端工程师利用css控制坐标（x，y）的方式定位切图，这样，每次请求一次就会加载所有的切图，刷新时长变短了，用户端打开 网页的加载变快了。

那么多图标混合在一张图片上，怎么在网页的不同位置显示出来？

这个就很简单了，只需要在显示图标的位置设置好盒子，以盒子左上角为(0,0)坐标，使用background-position来调节图片的位置，让需要使用的图标正好出现在盒子中即可实现一张图片在不同位置显示不同的图标。（正值为下和右，负值为上和左，所以一般用负值）

精灵图的制作方法

1.利用在线工具进行制作

工具名称：css sprites generator （google浏览器直接搜，第一个就是）

打开的页面如下：

把切好的图拖到左边有绿色按钮的模块中，右边就会自动形成大图，一般也就是放一些小的icon之类的，尺寸不建议太大。大家特别注意一下这里，下图中的下拉选项应该是和开发调用有关系，但是现在随着网速的发达和研发技术的发展，pc端已经很少在用精灵图了，基本都是切图的方法打包给前端开发来实现。

2.利用AE制作（通常我们选择这个方法）

工具名称：css sprites generator （google浏览器直接搜，第一个就是）

精灵图适合尺寸较小的使用场景，如果是一个按钮的状态，其实也就是三个状态，normal、hover、press，那么我们其实可以手动把这三个状态做成一张长图，交给开发做一个background-position位置的定位实现状态的改变。

举例：

软件：After Effects、Sketch & figma

插件：css-Sprite-Exporter.jsx（这是精灵图导出的重要插件）

AEUX（这里分为sketch插件和AE的插件，用于设计稿导入AE的插件）

第一步：

我们在sketch或者figma里做好设计图，比如此时我们的动效设计图为20*20的尺寸，那么需要在底部给一个隐藏的上下左右的安全边距，这里可以给6px的安全边距，原因是因为如果不给边距，在ae里做完动画导出后中间没有间隔，开发那边定位出来会出现误差，实现效果就会大打折扣。

在这里做动效果分为2种方法：

1、先导出26*26的图（拖到ae里作为底图），再分别把每个元素单独导出图片格式（具体看动效需要），拖到AE里把每个元素按设计稿里的位置定位好，然后开始做动画。

优点：设计稿里所有效果都会支持（透明、投影、内阴影，高光），如果只是简单的缩放位移，可以这么做。

缺点：有些动画比较鸡肋，比如要做路径动画，那肯定不支持，色差也是会有的。

2、直接用aeux导入AE

优点：支持复杂的动画，比如路径动画，蒙版，可做范围比较广。

缺点：比如要导出lottie的话，不支持渐变等等。。

在AE中的边距要与在sketch中是一致的，做好动画后，点击文件 - 脚本 - css-Sprite-Exporter.jsx 插件

点击后，会出现精灵图插件面板，这时候最大宽度要与合成设置中的参数一致。

点击生成，我们会看到一个文件夹，里面包含生成的序列帧图和一个带有css代码的的网页，如下示例

至此，精灵图从设计到生成就结束了，然后把生成的文件夹压缩后交给前端研发即可。

我们来举一个二哈奔跑的实例，如下：

在sketch中绘制我们要做的页面动效设计图，要切记每个图我们要预留上下左右的边距，

我们在ae里做好动画后，导出的雪碧图应该是如下形式：

动画的路径是如 Z形 所示：

最终结果：

html和css部分，可供参考：

精灵图动画在h5页面的适配

H5页面代码一般是用rem，在适配各类机型的时候，往往会出现些许误差，这样都是不可避免的，我在实际工作中遇到雪碧图实现出来在iphone全面屏会出现1px的误差，效果是肉眼可见的左右晃动，这样体验不是很好。

解决方案：

布局写死宽高，用px布局。缺点：不同手机屏幕看到的绝对大小是一样的，元素不会根据手机屏幕放大缩小，自动适配（说白了就是小屏幕看到的效果相对来说会大一些，大屏幕看到的效果相对来说会略微小一些）。综合考虑到业务小屏手机（360安卓机型宽和375宽苹果机型）用户较少，所以采用了这个办法，最后落地效果很好。

注：

写死宽高的适配方式不适用于所有场景及业务，具体还是要看具体情况而定。假设小屏用户手机占比很少很少，现在主流大屏用户居多，那么可以舍弃小屏的手机，主要看大屏的效果就ok。

精灵图的优缺点：

优点：

1.减少网页http的请求，从而加快了网页的加载速度，提高用户体验

2.开发成本中等，沟通成本小

3.解决了命名困扰，只需对一张集合图片命名就行，不需要对每个图片进行命名

缺点：

1.在宽屏，高分辨率下的自适应页面，如果图片不够宽，会出现断裂的情况

2.维护麻烦，如果效果有改动，一般要改整张图；如果宽高发生改变，对应的x，y坐标也要改

3.不要制作太大的精灵图，一般都是在100～200左右

实现精灵图常见问题：