原文地址

那一天,我收到设计姐提供的图片

big 1

ganjuebudui 1

立志成为一位优秀工程师的我,看图深思..

为了节省流量(流量就是金钱)
为了让图片更快加载(更好的体验)


对,图片多余部分应该要被裁剪掉!

3 1

于是我,手动裁剪后,发现图片大小从 2.1kb 降至 1.9 kb,减少 10%!

44

于是我告诉了设计姐,请她帮忙裁剪一下图片

441 1

设计姐不辞辛苦地为我裁剪…

3332 1

当我收到裁剪后的图片的时候,十分感动

jihe 1

ganjuebudui 1

应该怎么把每一帧图片位置还原呢??!

有 CSS transform !
可以使用 transform:translate(x,y) 移动到图片原来位置上!

于是我,在 chrome 上调整位置拿具体参数

6667

wenzi 1

在我快放弃的时候,我看到了一个叫 gka 的开源工具

kenan-gka22 1

我看了一下 gka 的介绍

gka 是一款简单的、高效的帧动画生成工具。

通过对图片集进行处理,一键式生成序列帧动画文件,并内置相关优化。

  • 一键式 : 图片文件批量序列化重命名,生成帧动画文件,支持预览
  • 性能佳 : 支持合图模式✓,相同帧图片复用✓,图片空白裁剪✓,图片压缩

GitHub 地址:https://github.com/joeyguo/gka


于是,我使用了 gka 的一行命令

没等我反应过来,gka 就帮我裁剪好图片,而且自动生成了帧动画文件,还可以预览!还可以有更多优化!

662267

天呐,早点发现的话,设计姐也不用一张张裁图了,我也不用移了这么久了!

有了 gka 一键式生成帧动画,我先下班了!

大家一起早下班吧!

tuijian

havefun 1

本故事纯属虚构,但 gka 是真的好用,试试!

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

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

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/07/gka2/

  1. 孟陬 2017 年 9 月 5 日

    震撼了,用来做游戏简直了

  2. hecdyg 2017 年 8 月 14 日

    我觉得OK

  3. ante 2017 年 8 月 2 日

    是否可以修改图片的dpi值呢

  4. 孙老四 2017 年 7 月 27 日

    多谢分享,马克一下备用~~

    • TAT.joeyguo

      TAT.joeyguo 2017 年 7 月 27 日

      欢迎使用和反馈哈

发表评论