缘起
无意中看到了国外一个动物保护主题的网站 In Pieces，发现主要动画效果都是用 CSS 的属性 clip-path 实现的，下面是截取的部分动画
<img src="http://cdn.snowzen.cn/blog/origin.gif" alt="origin" style="zoom:25%;" />
随后发现作者还写了网站的制作过程：《The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths》
每个动物都是由多个三角形构成，三角形又是通过 clip-path 的 polygon 裁切 div 得到的，把多个div堆叠在一起，加上 transition 属性，然后改变 polygon 的路径，就会形成动画效果，至于如何通过 clip-path polygon 形成动画变换，可以参考张鑫旭的《CSS3 clip-path polygon图形构建与动画变换二三事》，这里就不做过多展开了。
作者是手动获取并记录每个三角形的 polygon 路径，过程有点繁琐，遇到较为复杂的图形，就更麻烦了，本着提高效（tou）率（lan）的想法，寻找辅助的工具，找到了一个软件 PhysicsEditor，下面就简单介绍一下
软件介绍
PhysicsEditor 是一个 2D 游戏项目的物理形状编辑器，能够编辑 2d 碰撞多边形和物理参数 ，本质是对形状的描述并导出数据，我想除了用在游戏里，也可以把它导出的数据稍作处理，用在 clip-path 的 polygon 上
如何使用
1、直接拖拽目标图片到软件的左边栏
2、点击魔法棒工具，弹出参数界面，调整 tolerance 参数，保持每个图形都有相同的 Vertexes 数量，点击 ok
3、选择右边栏的数据格式为 panda 2
4、添加碰撞参数和名称（可以忽略）
5、点击上边栏 Publish 导出数据
注意：clip-path polygon 的不同图形能平滑切换的前提是有相同数量的 Vertexes，调整 tolerance 不能达到目的时，可以手动在编辑界面增删节点
然后得到 json 格式的点集数组
"ani3_00000": {
"body": {
"damping": 0.1,
"gravityScale": 1,
"mass": 1,
"size": [750, 525]
},
"shapes": [
{
"name": "",
"sensor": false,
"collisionGroup": 1,
"collisionMask": 1,
"type": "poly",
"polys": [
[521.000,134.000 , 511.000,137.000 , 517.000,127.000 ]
]
}
]
},
polys 数组记录的就是顶点的位置信息，这里使用代码简单处理，主要原理是把点集首尾相连，形成完整的图形。
clipSignleGraphics (data, percent, reverse) {
let end = !reverse ? [] : ['0% ', '0%', ', ', '0% ', '100%', ', '];
let bodySize = data.body.size;
let shapes = data.shapes;
let clacPos = (x, y) => {
return [(x / bodySize[0] * 100).toFixed(2) + '%', ' ', (y / bodySize[1] * 100).toFixed(2) + '%'];
};
shapes.forEach(ele1 => {
if (ele1.type !== 'poly') return;
let polys = ele1.polys;
reverse && (end = end.concat(clacPos(polys[0][0], 0)[0], ' 100%', ', '));
polys.forEach(ele2 => {
// 多个被剖分的三角形时，闭合各自三角的起点
(polys.length > 1 || shapes.length > 1 || reverse) && (ele2 = ele2.concat(ele2[0], ele2[1]));
// 多个独立形状时，每个形状结束时回到第一个形状起点
shapes.length > 1 && (ele2 = ele2.concat(shapes[0]['polys'][0][0], shapes[0]['polys'][0][1]));
for (let index = 0; index < ele2.length; index += 2) {
end = end.concat(clacPos(ele2[index], ele2[index + 1]), ', ');
}
});
reverse && (end = end.concat(clacPos(polys[0][0], 0)[0], ' 100%', ', '));
});
reverse && (end = end.concat(['100% ', '100%', ', ', '100% ', '0%', ', ']));
end.pop();
return end.join('');
}
传入此函数后得到
'52.4% 53.05%, 52.4% 34.86%, 67.07% 38.57%';
赋值给相应 div 的 clip-path polygon 属性
for (let index = 32; index >= 0; index--) {
setTimeout(() => {
let div = divall.eq(index);
div.css('clip-path', 'polygon(' + this.clipSignleGraphics(data[0][data[1] + pad(index, 5)]) + ')');
div.css('background-color', data[2][index]);
}, index * 20);
}
这样记录下每一个三角形的位置，最后在点击时切换不同动物的 polygon 数据就能得到如下效果（右为原效果）
<img src="http://cdn.snowzen.cn/blog/demo.gif" alt="demo" style="zoom:25%;" /><img src="http://cdn.snowzen.cn/blog/origin.gif" alt="origin" style="zoom:25%;" />
其他用途
除了应用在这种单一三角形的动画上，不规则图形上的效果也不错
1、比如有一个这样的外边框
<img src="http://cdn.snowzen.cn/blog/image-20210312132104297.png" alt="image-20210312132104297" />
经过PhysicsEditor编辑并导出数据后，可以将多余的图片部分裁切
<img src="http://cdn.snowzen.cn/blog/图片3.gif" alt="图片3" style="zoom: 50%;" />
注：只做裁切，没有动画需求的话也可以使用 CSS 的 mask-image 属性来实现，详见《借助 CSS mask 遮罩显著优化 PNG 图片的尺寸》
2、利用不同图形的切换效果实现平滑连续的提示：
<img src="http://cdn.snowzen.cn/blog/ctrtips.gif" alt="ctrtips" style="zoom:15%;" />
这里用到一个中空的算法，原理就是反向拼接点集的顺序
hollow (data) {
let end = '0% 0%, 0% 100%, ';
data.forEach(ele1 => {
let arr = ele1.shape;
let st = arr[0] / 100 + 'rem 100%, ';
arr.push(arr[0]);
arr.push(arr[1]);
arr.forEach((ele2, idx) => {
let fix = (idx % 2) > 0 ? 'rem, ' : 'rem ';
st += ((ele2 / 100) + fix);
});
st += (arr[0] / 100) + 'rem 100%,';
end += st;
});
let aaa = end + '100% 100%, 100% 0%';
return aaa;
}
总结
有了工具的辅助，减少繁杂的重复工作，就能有更多精力注重细节和创意的打磨，本文仅是对 PhysicsEditor 和 polygon 一点粗浅应用尝试，欢迎探索更多的可能并发表观后感
