快速制作多倍图帧动画方式及原理:gka[ ratio]

郭林烁 edited this page Apr 25, 2018 · 4 revisions

原文地址

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

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

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

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

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

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

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

文件夹:/workspace/img/

./img
├── gka_1.png
├── gka_2.png
├── gka_3.png
└── ...

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

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

./gka-img-css-2x
└── gka.html
└── gka.css
└── img
    └── 2x
        ├── gka_1.png
        ├── gka_2.png
        ├── gka_3.png
        └── ...

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

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

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

文件夹:/workspace/img/

./img
    └── name@1x
        ├── gka_1.png
        ├── gka_2.png
        ├── gka_3.png
        └── ...
    └── name@2x
        ├── gka_1.png
        ├── gka_2.png
        ├── gka_3.png
        └── ...

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

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

./gka-img-css
└── gka.html
└── gka.css
└── img
    ├── gka_1.png
    ├── gka_2.png
    ├── gka_3.png
    └── ...
    └── 2x
        ├── gka_1.png
        ├── gka_2.png
        ├── gka_3.png
        └── ...

其他方式

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

gka /workspace/img/ --ratio 2 -us

多倍图帧动画原理

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

<style>
.bg {
  background-size: 40px 30px;
  background: url(./img.png)
</style>
<div class="bg"></div>

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

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

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

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.