028-86261949

当前位置:首页 > 技术交流 > paperJS破冰学习02-鼠标跟随式球状3d动画效果(上)

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

2019/04/25 09:06 分类: 技术交流 浏览:8

(完整效果预览请查看附录01.gif,当前文件格式内部不允许嵌入gif图像)

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)

#标签:paperJS,破冰,3d动画