「CSS3」ImageMagick - 从gif建立雪碧图动画 - Sprite Sheet Ani

Acceml 发布于2019-08-29 12:46 / 3212人阅读

摘要：由于图片是根据一定的方式进行编码的，有的时候对于同一幅图片，垂直拼接和水平拼接后的图片体积可能会差异比较大，最好都生成一幅，然后进行选定素材及地址最后附上雪碧图动画的运行，有和两种方式，并可以进行暂停加速减速反向操作戳

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

云服务器 GPU云服务器雪碧图 html使用雪碧图 css3动画 Gif加载动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112129.html

CSS3动画之逐帧动画

摘要：什么是逐帧动画要了解逐帧动画，首先要明确什么是逐帧动画。简而言之，实现逐帧动画需要两个条件相关联的不同图像，即动画帧连续播放。因此在触屏页面中逐帧动画使用广泛，下文将对其进行详细介绍。因此，逐帧动画也被称为精灵动画。什么是逐帧动画要了解 CSS3 逐帧动画，首先要明确什么是逐帧动画。看一下维基百科中的定义：定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，...

RancherLabs 2019-08-30 15:43 评论0 收藏0
利用 CSS animation 和 CSS sprite 制作动画

摘要：今天给大家介绍一个使用配合雪碧图来制作动画的方法，可以做出类似于动画的效果。利用雪碧图来制作动画使用了里面的一个重要的函数。 CSS3 大大强化了制作动画的能力，但是如果要做出图案比较复杂的动画，选择 GIF 依然是一个不错的选择。今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动画的方法，可以做出类似于 GIF 动画的效果。 CSS3 An...

陈伟 2019-08-28 18:08 评论0 收藏0
浅探前端图片优化

摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加...

CocoaChina 2019-08-30 15:54 评论0 收藏0
浅探前端图片优化

摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加...

X1nFLY 2019-08-23 14:14 评论0 收藏0
CSS3帧动画

摘要：在制作帧动画的时候，一般采用雪碧图的方式，通过切换图片的位置，使其连续播放，从而形成动画。使用改造之后的代码，利用伪类进行背景填充，然后控制该元素移动来实现逐帧动画。在制作帧动画的时候，一般采用雪碧图的方式，通过切换图片的位置，使其连续播放，从而形成动画。雪碧图雪碧图的制作可以使用compass制作，还可以使用一些小工具进行制作，提供一个在线制作雪碧图的网站。CSS Sprite...

Nino 2019-08-30 15:53 评论0 收藏0