Read In Pieces

[XXHolic]

引子

在比较早的时候，看过一个 h5 里面的效果感觉很惊艳，最近又想起这个事情，找到了原项目 In Pieces。可以下载到本地直接在浏览器查看，在线展示网址见这里。个人觉得很有趣，选择其中的一个动物效果尝试做出来。期间的一些体会在此总结一下。

这是自制效果页面，移动端访问如下：

原理

在没看原作者解释之前，本以为主要是用 JavaScript 实现的。事实证明 CSS 能做到的事情比预想多的多。

主要使用了下面的属性：

-webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );

clip-path 属性可以创建一个剪辑区域，区域可以是自定义多变形。目前支持情况见 Can I use clip-path 。

图案都是通过一组坐标进行绘制、变形和移动。

绘制

原理主要通过坐标点绘制多边形，那么在一个图案设计出来后，处理的方式有：

1. 人工计算距离百分比，手动在设计图上标识出来。可行但过于消耗精力。
2. 利用鼠标点击的位置信息，使用程序动态计算出距离。 这是示例。

使用第二种方式在绘制过程中，发现无可避免的需要进行微调。走了一些弯路后，有了下面一些体会：

• 建议将每块三角形进行数字标记，html 标签的类名携带数字与标签数字对应。
• 每一个三角形的坐标点，建议统一使用相同的书写顺序模式。例如以图片左上角作为参考点，垂直方向上，最靠近的点的坐标作为第一个坐标，然后顺时针书写其它点坐标。

按照上面的方式约定后，在后期微调的时候，会很方便的进行定位。

层级

在上面的示例中，可以发现有些地方存在交叉覆盖。处理的方式有：

1. 使用 z-index 进行区分，重叠不多的图案的确可行，重叠区域较多时，会比较花时间。
2. 事先规划好写图形的顺序，利用同层级元素，后面元素覆盖前面层级元素的默认特性。

闪烁

仔细看时，会发现三角形会有闪烁的效果，而且是种有序的闪烁感。起初以为使用 CSS 的 keyframes 动画改变一下透明度就可以了。尝试之后，发现不行。

实际上每个三角形对应的标签大小都是一样，只是 clip-path 的坐标不一样而已。如果在原标签上单纯的使用 keyframes 动画，透明度的变化效果很不好。查看源代码后，发现实现的关键点有：

• 统一在相同的伪元素上添加动画效果。
• 闪烁是改变伪元素的背景颜色。
• 动画 transition 按照一定的间隔设置延迟的时间。

动作

最后在尝试添加一些模拟动作的动画时，发现一些需要注意的点:

• 完全按照设计图上定位的坐标点，transition 的补间动画有些会覆盖不到，出现明显的空隙。因此有的三角形区域需要超出原本设计上的区域。
• 当很多三角形公用一个坐标点时，有动一发牵全身的效果，需要小心的进行调整。

参考资料

• In Pieces
• 汉化 In Pieces
• clipping-paths
• Purecss Francine

🗑️

最近玩了一个小游戏《Gris》，刚开始本以为是那种小解密游戏，玩着玩着，发现里面的画面设计没有复杂华丽的构造，简单的图形和线条，呈现出简洁干净的美感。游戏的音乐跟剧情很搭，简单的玩法和操作也是别出心裁。