1.鼠标跟随

当下案例的所有的一切都是建立在中心点上的，只要中心点发生一点偏移，整个图形都会伴随发生移动。因此想要完成鼠标跟随，就需要获取鼠标坐标，然后重新设置为position即可。而优秀的框架总是能够想人之所想，急人之所急。

感谢paperJS，再一次提供了贴心的函数：function onMouseMove(event)  来帮助处理鼠标的移动事件，免去了我们自己封装的困扰。

这里需要提一句：

• onFrame函数的event是一个Base类型的Object
• 而onMouseMove函数的event则是一个toolEvent类型的Object

就参数而言虽然两者都叫event，但是还是需要说明一下，这两个event并没有任何一丁点关系！

onMouseMove函数中的参数event对象中有一个point参数，而这个正是我们所需要的position鼠标坐标（毕竟你完成的是不是就是【鼠标跟随】？不跟随鼠标坐标还想干啥）

2.裸眼3D

鼠标坐标的即时获取虽然能够做出跟随效果，但是很明显不够酷炫，或者说不够3D。而要想要在2D平面中实现3D效果听起来非常困难但是实际上做法却出乎意料的简单：让大脑自己脑补出3D效果。

听起来有点扯是吧，别说你不相信，就是我最开始我也是不相信的那个。之后我也是理解了好久才明白，容我换个说法：2D中想要实现3D效果就需要让整体拆分，让物体的一部分先运动，其余部分后运动。

只要动作层次分明就足够让人的大脑自己脑补出3D效果。其中比较经典的就是下面这张图（背景位移距离小，部分皮肤位移距离大，宝石不位移）。

那么换算到我们的的代码里要怎么做呢？OK，我们不再直接将鼠标坐标赋值给position，而是将这“一次”的改变，分成几次执行。

当我们实现上述代码的时候，延迟移动的效果已经出现了，但是3d效果还没看到。这是因为整个动画的渲染时机仍然还是发生在每一次onFrame中的，也就是说每次渲染的时候全体path依然会同时移动。而我们必须要其中一部分path在鼠标移动的瞬间渲染，剩下的部分则是在onFrame中进行渲染。

这里的确是熬死了我好多脑细胞，最终想到了一个不是办法的办法：

1. 干脆把onFrame中的渲染path代码封装为一个函数render
2. 在鼠标移动的时候进行主动调用render函数来渲染所有path
3. onFrame帧刷新正常执行render函数来刷新渲染所有path

这样我认为在鼠标移动的瞬间会立即执行render方法渲染所有path，但是onFrame帧刷新的时间间隔非常短暂(1秒钟有60次)。所以很大概率会导致在鼠标移动触发的render渲染没能执行完的时候，onFrame已经开始下一次刷新了。这个时候虽然两个函数执行的刷新是不会互相冲突的，但是在页面中带来的效果就会使鼠标移动触发render中已经渲染完成的path位置发生一次改变，而onFrame帧刷新的时候所有path一起位置发生一次变化。这样就会导致鼠标中心对应的path比距离鼠标中心相对远一些的path“可能”会多渲染一次，而这种可能会带来一种视觉上的误差，简单说，就是让大脑开启脑补了。

5.总结

以上就是paper.js动画框架学习破冰的第一篇。简单来说paper.js功能的确十分强大，但是在圈子内知名度不高可能由于是因为官方对于文档的支持不是特别的好的缘故吧。哈哈，当然也有可能是我孤陋寡闻的缘故。好了，不管怎样，今天的内容应该能够让你对paper.js有一定的了解了。相信在后面的内容中，我们能对paper.js有更深刻的认识.