碎片拼图实现过程

就碎片拼图而言，一幅画简化来说就是许多不同颜色三角形的组合，而两幅画之间的切换，可以看作三角形的形状和位置变换，因此，我们首先需要实现的就是一个三角形在两幅画之间的变换，之后将三角形增多，便基本是最终的效果。

一个三角形的变换

因为我们采取的是 SVG 的形式，因此三角形的表示也很简单，就是简单的三个点：

<svg width="200" height="200" viewBox="0 0 100 100">
  <polygon points="20,20 50,50 70,30" />
</svg>

这是一个静态的三角形，实际上可以看作是碎片拼图的一幅画，要让三角形动起来，这里为了简化实现，借用animejs来实现动画效果。

export const demo1 = () => {
  onMounted(() => {
    anime({
      targets: '#p1',
      points: [
        { value: '20,20 50,50 70,30' },
        { value: '30,30 70,90 90,10' },
        { value: '20,20 50,50 70,30' },
      ],
      easing: 'easeOutQuad',
      duration: 2000,
      loop: true,
    })
  })
}

可以看出，只需要变换points属性就可以实现三角形的变换，既然已经实现了这个效果，那接下来的问题就是如何用三角形来画一幅画了。

利用三角形画画

既然是画画，那当然得首先有个画布，画布的背景是我们需要画的参考物，然后通过鼠标勾勒大量的三角形，给每个三角形上色，便可以画出一幅尚可的碎片画。基于这个过程，我们以一个 SVG 作为画布，以鼠标连续的三个点作为一个三角形的绘制过程，配合三角形的选择、删除和修改颜色，大体的架子便有了。