还有点炫酷~
动画算法
下面分享下我的动画算法。Demo 里的效果是怎么实现的呢？
由于在画布的网格上，每个单元格都有行列号（i，j）。我希望能给出一个坐标（i，j）后，从近到远依次得出坐标周围所有菱形上的点。具体如下图，懒得做图了~
比如坐标为（3，3）
距离为 1 的点有（2，3）、（3，4）、（4，3）、（3，2）共4个；
距离为 2 的点有（1，3）、（2，4）、（3，5）、（4，4）、（5，3）、（4，2）、（3，1）、（2，2）共8个；
........
求出这一系列点的算法也很容易， 因为菱形线上的点与坐标的 行号差值的绝对值 + 列号差值的绝对值 = 距离，具体如下：
| function countAround(i, j, dst) { var resArr = []; for (var m = (i-dst); m <= (i+dst); m++) { for (var n = (j-dst); n <= (j+dst); n++) { if ((Math.abs(m-i) + Math.abs(n-j) == dst)) { resArr.push({x: m, y: n}); } } } return resArr; } |
该函数用于给定坐标和距离（dst），求出坐标周围该距离上的所有点，以数组的形式返回。但是上面的算法少了边界限制，完整如下：
| countAround(i, j, dst) { var resArr = []; for (var m = (i-dst); m <= (i+dst); m++) { for (var n = (j-dst); n <= (j+dst); n++) { if ((Math.abs(m-i) + Math.abs(n-j) == dst) && (m >=0 && n >= 0) && (m <= (I-1) && n <= (J-1))) { resArr.push({x: m, y: n}); } } } return resArr; } |
这样我们就有了一个计算周围固定距离上所有点的纯净函数，接下来就开始完成动画渲染了。
首先编写一个用于清除单元格内容的清除函数，只需要传入坐标，就能清除该坐标单元格上的内容，等待之后绘制新的图案。
| handleClear(i, j) { ctx.clearRect(dw*j, dh*i, dw, dh); } |
anotherImg 为下一张图，最后通过 setInterval 不断向外层绘制新的图片完成碎片式的渐变效果。
| var dst = 0, intervalObj = setInterval(function() { var resArr = countAround(i, j, dst); resArr.forEach(function(item, index) { handleClear(item.x, item.y); handleDraw(anotherImg, item.x, item.y); }); if (!resArr.length) { clearInterval(intervalObj); } dst ++; }, 20); |
当 countAround 返回的数组长度为0，即到坐标点该距离上的所有点都在边界之外了，就停止定时器循环。至此所有核心代码已经介绍完毕，具体实现请查看源码。
