画框里挂着一张照片,每隔一小段时间就有一条看不见的直线横穿画面,把当前所有碎片沿这条线一分为二;切开的两半随即朝相反方向滑开一点,并带着轻微旋转。切的次数越多,碎片越细,整张照片逐渐从完整走向碎裂,到达设定次数后自动重来。右上角有一个可折叠的控制面板,能调切割间隔、下落速度和横向偏移,还能打开调试模式看到切割线本身。技术上是 原生 Canvas 配多边形裁剪算法,第三方库只用了一个参数面板。
这份源码的三个关键点
碎片是多边形,不是矩形。初始状态是一个四边形,每次切割都把多边形按直线拆成两个新多边形,顶点数会随切割次数增长,所以形状是真正不规则的。
贴图靠坐标映射。每个碎片记住自己在原图上的位置,绘制时按这个偏移取像素,因此碎片移动后上面的图案依然是原图对应的那一块。
切割线取自外接圆。先在一个能罩住整张图的圆上随机取一点,再取它的近似对径点,两点连线必然穿过整幅画面,不会切空。
为什么第二个点不是正对径点
源码里第二个端点不是简单的「加半圈」,而是加半圈之后再随机偏移最多四分之一圈:
const angle1 = angle0 + Math.PI + Math.random() * (Math.PI / 2) * randomDirection;
如果用正对径点,每条切割线都会穿过圆心,碎片会呈放射状均匀分布,看久了很规律。加上这个偏移后,切割线有远有近、有斜有正,碎片大小差异明显,解构过程才显得自然。注释里保留了另外两种取点方案,可以直接切换对比效果——这是这份源码作为学习材料的贴心之处。
能改的地方
控制面板里的三项(切割间隔、最小下落速度、横向偏移系数)可以实时调,满意后把数值写回脚本顶部的同名变量即可固化。换图只需替换脚本末尾那两张内嵌图片的地址,一张是照片、一张是画框,尺寸会自动适配。想改成点击触发一次切割,把定时调用换成事件绑定即可。
常见问题
换成自己的图后是白屏?
脚本会等两张图解码完成再启动,如果图片地址错误或跨域受限,尺寸会是零从而无法取像素。请把图片放在同目录下,并通过本地服务器打开页面。
碎片太多之后变卡?
碎片数量随切割次数成倍增长,每一片都要独立绘制。把切割总次数调小,或者在达到一定数量后停止切割只保留漂移,是最有效的优化。
可以保存成视频或动图吗?
可以。这类逐帧绘制的画布用浏览器自带的媒体录制接口就能录下来;源码中原本引用的录制插件已移除,需要的话自行接入即可。
适合用在哪
图片切换的转场动画、艺术与设计类站点的首屏、展览与作品集的开场,也是一份很好的「多边形沿直线裁剪」算法参考。切割算法、贴图映射与漂移逻辑的完整实现都在脚本里,下载后可查看。