原文地址

gka

多倍图的适配在前端开发还是比较常见的,像在 Retina 屏幕,一般会使用二倍图从而让图片保持清晰,而在开发帧动画中使用的图片实际上同样需要做这样的适配处理。gka提供一键式的制作多倍图帧动画的方式。

gka 是一款简单的、高效的帧动画生成工具,图片处理工具。

官方文档:https://gka.js.org

Github:https://github.com/gkajs/gka

使用gka生成多倍图帧动画的方式

方式一:对单一文件夹图片进行处理

举例,2倍图的图片文件夹地址为 /workspace/img/

文件夹:/workspace/img/

使用 gka 命令及 –ratio 参数,生成 2 倍图动画

文件夹:/workspace/gka-img-css-2x/

生成的代码中将会把2倍图大小的图片,进行正常的1倍展示,使得帧动画在retina屏下能够清晰展示。

方式二:对多文件夹图片进行处理

举例,图片文件夹地址为 /workspace/img/ 中包含 1 倍图和 2 倍图的图片文件夹 name@1x,name@2x

文件夹:/workspace/img/

使用下方命令,gka 将自动识别文件夹名(1x 为 1 倍图的目录,2x 为 2 倍图的目录,依此类推。),一键生成 1 倍图和 2 倍图动画。并在不同的设备下自动选择播放对应动画,保持清晰。

文件夹:/workspace/gka-img-css/

其他方式

结合 gka 提供的其他参数一同使用,如 -u 进行图片去重,-s 进行合图处理等等

多倍图帧动画原理

当背景图片设置 background-size 为具体值时,图片将以该值的大小进行填充展示。二倍图的处理其实就是按照这个原理来实现的。举个例子,二倍图的宽高为80px 60px,那么可以通过缩小一倍,即设置 background-size 为 40px 30px 来得到展示中需要的宽高,这样在 retina 屏幕下,图片将保持清晰。示例代码如下

当图片是取自合图时,可以通过 background-position 来定位到图片在合图中的位置。而当设置 2 倍图的 background-size 进行 1 倍展示时,我们将需要把对应的 background-position 也进行对应的缩小倍数处理。紧接着就是大量的计算与代码编写了。

这一切,就交给 gka 来处理吧!

欢迎使用 gka ,欢迎任何意见或建议,谢谢 :D

GitHub: https://github.com/gkajs/gka

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2018/04/gka-ratio/

发表评论