前言

某天设计发来一个 网站，问我能不能实现这种类似的效果。

不知你们什么感想，反正我当时第一次看到这个网站的效果时，心里第一反应就是这做个锤子啊。

F12 调试

让我们打开调试，瞅瞅别人是如何实现。

可以看到在该层级下，页面有很多个 shard-wrap 元素，而每一个元素都是定位覆盖其父元素的。

当我们添加 display: none; 后，可以看到嘴角这里少了一块。

而继续展开其内部的元素就可以看到主要的实现原理了：clip-path: polygon();。

clip-path 和 polygon 更详细的解释可以看 MDN，简单来说就是在一个 div 里面绘制一个多边形。

比如上图的意思就是：选取 div 内部坐标为 (9.38%,59.35%)，(13.4%,58.95%)，(9.28%,61.08%) 这三个点，并将其连起来，所以就能构成一个三角形了。然后再填充 backgroundColor 该三角形就有对应颜色了。

实现过程

调试看完别人的实现后发现，好像也不是很难。但是数据又如何搞来呢?

当然我们可以直接在接口那里找别人的数据，但是我找了一会发现不太好找。

于是想到咱们可是一名前端啊，简单写段 js 扒拉下来不就好了吗，想要更多，就滑一下滚轮，切换下一个碎片图像，再执行一次即可。

复制 1function getShardDomData() {
 2  const doms = document.getElementsByClassName('shard')
 3  const list = []
 4  for (let i = 0; i < doms.length; i++) {
 5    const style = window.getComputedStyle(doms[i])
 6    let str = style.clipPath.replace('polygon(', '').replace(')', '')
 7    list.push({
 8      polygon: str,
 9      color: style.backgroundColor,
10    })
11  }
12  return list
13}
14console.log('res: ', getShardDomData());

碎片化组件

简单封装一个碎片化组件，通过 transition 和 delay 增加动画效果以及延迟，即可实现切换时的碎片化动画效果。我这里是用的 tailwindcss 开发的，大家可以换成对应 css 即可。

复制 1export type ShardComItem = {
 2  color: string
 3  polygon: string
 4}
 5
 6export type ShardComProps = {
 7  items: ShardComItem[]
 8}
 9
10export default function ShardCom({items}: ShardComProps) {
11  return (
12    <div className="relative w-full h-full min-w-20">
13      {items?.map((item, index) => (
14        <div className="absolute w-full h-full" key={`${index}`}>
15          <div 
16            className="w-full h-full transition-all duration-1000 ease-in-out" 
17            style={{
18              backgroundColor: item.color,
19              clipPath: `polygon(${item.polygon})`,
20              transitionDelay: `${index * 15}ms`,
21            }}
22          ></div>
23        </div>
24      ))}
25    </div>
26  )
27}

模仿实现的 demo 地址

组件的代码放码上掘金了，感兴趣可以自提。

自制画板绘画 clip-path

当然只扒拉别人的数据，这肯定是不行的，假如设计师想自己设计一份碎片化效果该怎么办呢？

解决方法也很简单：那就自己简单开发一个绘图界面，让设计师自己来拖拽生成想要的效果即可。

线上画板地址

画板的实现就放到 下篇文章 中讲述了。

最后

当然最终只是简陋的实现了一部分效果罢了，还是缺少很多动画的，和 原网站 存在不少差距的，大家看个乐就行。