「CSS3」ImageMagick - 从gif创建雪碧图动画 - Sprite Sheet Animation

ImageMagick

ImageMagick 是当前很是流行的一个图像处理库，一些大型的公司，例如Facebook、雅虎等都在使用 ImageMagick 对用户上传的图像进行处理。

ImageMagick 基本上能够支持全部的基础图像处理，例如尺寸、亮度、灰度的改变，滤镜和特效的添加，图片格式转换，制做gif或者扁平化gif...基本上你所能想到的全部基础图片操做，它都能作到。

ImageMagick 对平台和语言的支持都十分完善，基本上支持如今流行的全部语言，即便不支持你如今所使用的语言，直接经过命令行调用 magick 命令也是很是方便的。

安装ImageMagick的步骤我就不赘述了，你们根据本身的平台来下载相应的二进制包，->传送门<-

雪碧图动画

雪碧图动画指的是，将一个动画所须要的全部帧平铺（或横或竖）排列在一张图片上，当动画运行时，较短期内改变其容器的 background-position，获得动画播放的效果。

下图是bilibili点击收藏按钮的动画效果及其雪碧图（GIF是笔者根据雪碧图来进行合成的）

GIF图大小为27KB，雪碧图大小为53KB

雪碧图稍大的体积绝对配的上它的优势：

• 暂停播放
• 方便控制播放速度和播放速度的时间函数
• 控制播放顺序和次数

若是你须要对动画效果进行控制的话，使用雪碧图不失为一种好方法，不然仍是使用gif下降图片体积。

ImageMagick 将gif转换为png

$ convert star.gif -coalesce +append star.practice.png

就是如上一条指令，接下来解释一下上面的指令：

• -coalesce 表示将gif每一帧都补全为完整的一副图。因为为了压缩体积，gif每一帧的数据都是在前一帧的数据上进行增量覆盖。因此若是直接提取出每一帧的话，则会获得一组残缺不全的图片，你们能够去掉该参数试一试。
• +append 表示将提取出来的一组图片按照水平方式拼接起来，-append 则是按照垂直方式拼接起来。

因为图片是根据必定的方式进行编码的，有的时候对于同一幅gif图片，垂直拼接和水平拼接后的图片体积可能会差别比较大，最好都生成一幅，而后进行选定

素材及DEMO地址：https://github.com/JasonKid/f...

DEMO

最后附上雪碧图动画的运行DEMO，有CSS和CSS3两种方式，并能够进行暂停、加速、减速、反向操做

戳-> Github: JasonKid fezone ImageMagick