paperJS破冰学习之鼠标跟随式球状3d动画效果01

1.尝试构建

先把骨架搭建出来，引入paper.js脚本，并准备好paperScript脚本，然后和页面canvas完成绑定。

然后功能拆分，案例中的图形实际上就是一个从中心点向外发散的N个三角形。

那么我能不能先制作出从中心点向外发散的一个三角形呢？感觉应该不是特别困难，但是我现在无从下手，所以我们此时去看官方案例的源码。

从源码中获知了下面的一段内容：

在代码第4点中：我们在canvas上创建了一个path，并对这个path设置了fillcolor（填充色），并确认这个path将会是一个封闭图形。

不过说实话这才刚开始就直接给了我一个下马威，new Path()后面的参数到底可以写什么？怎么写？官方文档我找了好久愣是没有找到具体说明！

仅仅只是在【Tutorials->Paths->Using Color and Style】的文章说明里面找到了一点点蛛丝马迹，还得是连蒙带猜的那种，不过万幸我实际测试结果的确符合了我的预期。

具体解释简单说就是给path对象设置一个JSON类型的参数（这里我们知道path允许写JSON格式参数了），参数中指明了当前path的填充色和关闭样式。（这里我们知道参数中至少允许写fillColor和close两个字段了）

而第5点则是我灵机一动的产物。根据基础案例中的提示，我当时在想这个path既然被创建出来了就必然需要进行绘制，而案例中图形的初始位置是画布canvas的中心点，所以paper.js是不是有可能提供一种手段来直接获取canvas中心点，并提供绘制方法呢？

皇天不负有心人，经过一番逼死强迫症的查找我在这两个位置找到了相关说明:

• view.center表示获取当前paperScript对应canvas画布的中心点坐标(x,y)，view是一个paper.js的内置对象。

• path.segments = [point1, [point2, [point3]]];则可以用来绘制一个封闭的，三个点构成的图形。
  

path.segments = [
position,
position + { angle: 1 / 12 * 360, length: 300 },
position + { angle: 2 / 12 * 360, length: 300 }
];

所以这句话的意思就是：以position坐标为原点，以300px长度限制。从360度的十二分之一开始到十二分之二结束构图来绘制一个三角形。运行效果不负期待。

2.多个path

万事开头难，有了一个接下来的事情就好办了。一个path是一个三角，多来几个不久构成案例中的样子了？说干就干，这一步没什么难度，直接循环创建就OK。

12个path只是我随便规定的，因为刚才制作三角形的时候我用了十二分之一，所以这里也是为了能让path们画出一个完整的圆来（原谅我这个强迫症）

然而我写到这里的时候遇到了个问题，导致我写不下去了：

• path一个的时候，可以直接指定path.segments来进行样式渲染。但是一旦path多了，不知道如何获取一个所谓的【path集合】，从而导致无法对所有的path进行渲染（每个path都需要三个点来渲染）
  

于是老规矩，官网走起。

在这里找到了一个相关说明：project对象中提供了一个名为activeLayer的对象，该对象表示当前正在处于激活状态的canvas。

而通过寻找activeLayer对象的children属性，即可获知当前处于这个canvas上的所有path对象。即：

于是顺利推进代码

3.动画

canvas动画的特征这里就不多解释了，一句话：每帧图像重新渲染。

所以我们如果想让我们的这个图像动起来，那么paper.js必然需要提供一个能够对页面进行“刷新”的方法（也就是canvas动画中我们用settimeInterval来手动强制刷新的这个操作）。

而这个方法就是onFrame()函数:

于是，代码继续推进，在onFrame中对每帧动画要渲染的path进行绘制即可。（我对长度进行了Math.random，以此保证看起来有差异）

瞧，实现了不是么？虽然由于onFrame每秒钟刷新60次导致非常鬼畜，但是毕竟实现了我们的功能不是么？(gif动态图像请参考02.gif)