paperJS破冰学习03-鼠标跟随式球状3d动画效果(中)

1.长度变化速率曲线

    每一帧中，每一个path的长度渲染都是完全随机的，因此会看到页面中的长度是一个眼花缭乱非常不舒服的效果。这里我思考了很久如何才能实现目标案例中的增长和衰退效果，而最终得到的答案和源码中的答案也不谋而合。那就是：三角函数曲线。简单来说使用正弦函数曲线就足够了。因为正弦函数曲线是一条震荡波，因此如果将长度与正弦函数的y坐标结合，在加以绝对值，就能够得到一条在单位时间内正向起伏的长度变化曲线。

而此时还面临的最后一个问题就是，正弦函数曲线的确y轴表示了长度，但是我们还欠缺一个随时间变化的增量x。也就是说我们必须有一个x变量随时间变化，才能通过sin(x)来获取到正弦函数曲线上的对应y值。而幸运的是这个属性paper.js框架已经考虑到了。在onFrame帧渲染函数中提供了一个名为event的隐式参数（此event和事件对象event完全不是一个东西），该参数如果想要使用则必须显式写出。

其中的base.count会随着onFrame的执行而不断进行累加，相当于一个paperJS自带的天然计数器。因此借助与sin正弦函数与这个计数器，我们就可以制作出随正弦曲线变化的length了。即 length = Math.sin(count) * 300。

    别急！虽然此时看起来已经可以控制path进行起伏变化，但是现在还有几个亟待解决的逻辑小问题：

• 如果path长度真的采用上面的公式，那么太棒了，所有的path长度在每次渲染的时候都一样。换句话说每个path的长度都是一起变大变小的，因为他们的长度都取决于count，而count在一次渲染中是固定值。因此我们可以通过循环变量i来保证每一个path在正弦函数上的y值不同，即 length = Math.sin(i + count) * 300
• 此时，第二个问题出现了，前面说过正弦函数是存在正负的。而长度这一概念是不存在正负的，因此我们需要“绝对值”一下，即 length = Math.abs(Math.sin(i + count) * 300)
• 最后一个不是问题的问题，那就是对于正弦函数sin而言，sin的参数每变化1°，对应在正弦曲线上的数值变化都会是一个非常可观的数字，何况这个数字还被放大了300倍（不明白的自己拿计算器按sin45和sin46差多少，再乘以300呢）。说的再直白一点就是我们需要根据count计数器来决定【在正弦函数上的length值】，但是又不希望这个变化十分迅速，所以最好的解决办法就是“降频”，也就是除以一个数字。把count缩小，这样计数器每次变化造成的length改变就变成了原有的多少分之一。即 length = Math.abs(Math.sin(i + count/40) * 300)

特别注意：event参数必须显示声明，这个event和事件对象event没有一毛钱关系。另外/40表示变化减慢40倍，40是随便写的。

    分析完毕，代码推进。

2.颜色渐变

    颜色改变其实在我们的案例中算是一个比较容易实现的步骤，关键点就是需要你必须知道【色相环】这一概念才能做出这个功能。在这里我们只需要知道两点即可：

• 色相环共计360度，重复增长无所谓，正负亦无所谓，不外乎就是361度的色相与1度的色相相同，或者-180度和正180度相同。
• paper.js中hue用来设置色相，而且设置数字即可表示度

所以只要path的色相在单位时间内发生变化就可以，而前面我们提到event.count是一个天然计数器。因此就有了下面的代码：

说实话length的负增量有没有都无所谓，但是添加这个负增量能够保证颜色的变化更明显一些，因为length也会伴随事件发生变化。

3.增大数量

    没什么好说的，原本12个path就是我们最开始的时候为了方便测试随手写的。现在只需要把12的地方改变成动态数量即可。记得绘制的时候的角度也要动态分配就好。