- 动画表现力强
- 老旧客户端对动图支持差
- ui导出的gif失真
- apng和webp兼容性差，gif色彩不够丰富且文件太大不易无损压缩，svg限制太多，svga对设计软件支持度低......
- 逐帧动画方式年代久远，是一种最原始的方式，最原始也就最有效，且在网页中生成的png图色彩支持度高，无损压缩方案成熟。
- 逐帧动画在一定程度上可以防止图片盗链问题。
逐帧动画（Frame By Frame）是一种常见的动画形式，其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。
非数据帧，而是帧数，又称为FPS（Frames Per Second）。每一帧都是静止的图象，快速连续地显示帧便形成了运动的假象。高的帧率可以得到更流畅、更逼真的动画。每秒钟帧数 (fps) 愈多，所显示的动作就会愈流畅。
- 人类眼睛的视觉暂留现象是每秒24帧，所以理论上大于24帧就可以视为流畅。动画、视频等多采用25-30帧。
- 游戏画面的变化速率很高，所以一般是越高越好。如果开启垂直同步，帧数一般应维持在60帧左右，最低也需要30帧。
补间动画，亦成为引导动画。绘制关键帧，中间插入的补间帧则是由计算机运算得出。分为动作补间和形状补间等。但是需要细腻处理的地方还会通过逐帧绘制来确保清晰度和流畅度。
- 部分功能缺失
- 客户端更新不宜，修复bug或增加功能
- 客户端体积较大，需下载使用不便
- 一个页面多次使用该工具生成的代码会导致不变
- 增加新的功能。css step支持
- 更换为web在线形式
- 对生成代码进行重构，考虑多次调用的情况
- 添加对rem的支持
- png图片上传的处理
- 根据配置生成精灵图和代码供下载
- gif图片上传的处理
- 逐帧图的查看和处理
使用vue来初始化项目，安装依赖并搭建基本架构。
尤其是在
package.json中，将scripts中的serve替换为dev
使用element-ui这个破ui库以babel-plugin-component和@babel/plugin-transform-runtime处理按需加载。
将配置的参数，使用ui库来添加好配置信息
- 出于某些原因，上传采用上传文件夹的形式，chrome中可以支持上传文件夹。目前不计划采用上传多个png图片的方式。
- 上传后会筛选出文件夹下png图片，将图片顺序按照名称去除非数字的字符后正序排列。
e.target.files是类数组，无法直接使用filter/sort等方法。
uploadPng.addEventListener("change", async function(e) {
let files = [].filter
.call(e.target.files, (v) => /\.png/.test(v.name))
.sort((a, b) => {
let an = +a.name.replace(/\D/g, "");
let bn = +b.name.replace(/\D/g, "");
return an - bn;
});
});- 将所有文件格式化为可使用的对象。如下
async formatPng(files) {
return await Promise.all(
files.map(async (v) => {
let img = await this.getFileClientRect(v);
let data = await this.getFileBase64(v);
return {
name: v.name, // 图片名称
img, // new image对象
width: img.width, // 图片宽度
height: img.height, // 图片高度
data, // 将图片转为base64
};
})
);
}-
上传gif后，将gif进行截取。此段涉及到二级制处理，获取所有帧的图和每秒帧数。
-
同上格式化为可使用对象
使用view.js来查看所有帧图片。by the way，这个库是我用过的最满意的图片查看库，已用了多年的多个项目。
-
通过拼接布局的方式，根据配置的行列来将所有帧图片拼接到canvas中，保存图片即将canvas转为base64之后保存。
-
因为浏览器内存限制，chrome下canvas宽高度最大值为
16380*16380，超出则无法保存和转换为base64，因此在超出时添加了错误提醒。 -
获取生成图片的信息，宽高可以计算得出，存储文件大小有两种方式
// base64字符串获取保存的图片大小。一般在3/4左右
base64.split(",")[1].length * 3 / 4 / 1024).toFixed(2)
// 通过blob方式更为精确
(window.atob(base64.split(",")[1]).length / 1024).toFixed(2)-
输出代码并添加样式美化。因为皆是html代码，因此使用的是
highlight.js/styles/vs2015.css的风格 -
添加图片和代码的复制下载
-
在iframe中实现预览。不污染本页面
-
完成！
其实还缺少一些功能，png多图上传、帧图自定义的编辑/删除/排序功能、在线图片压缩功能（目前用的tinypng）等等，还需看情况待定添加。
需求不是无缘无故产生的，而业务，也不是一尘不变的。
只有相互映衬配合，才能相得益彰，互相成就。
大鹏一日同风起。扶摇直上九万里！