设计问能不能实现这种碎片化的效果

前言

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

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

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 扒拉下来不就好了吗，想要更多，就滑一下滚轮，切换下一个碎片图像，再执行一次即可。

function getShardDomData() {
const doms = document.getElementsByClassName('shard')
const list = []
for (let i = 0; i < doms.length; i++) {
const style = window.getComputedStyle(doms[i])
let str = style.clipPath.replace('polygon(', '').replace(')', '')

    list.push({
polygon: str,
color: style.backgroundColor,

    })

  }
return list

}
console.log('res: ', getShardDomData());

碎片化组件

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

export type ShardComItem = {
color: string
polygon: string

}

export type ShardComProps = {
items: ShardComItem[]

}

export default function ShardCom({items}: ShardComProps) {
return (
<div className="relative w-full h-full min-w-20">

      {items?.map((item, index) => (
<div className="absolute w-full h-full" key={`${index}`}>
<div 
className="w-full h-full transition-all duration-1000 ease-in-out" 
style={{
backgroundColor: item.color,
clipPath: `polygon(${item.polygon})`,
transitionDelay: `${index * 15}ms`,

            }}

          ></div>
</div>

      ))}
</div>

  )

}

模仿实现的 demo 地址

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

自制画板绘画 clip-path

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

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

线上画板地址

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

最后

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