让每一名学员高薪就业
返回列表 发新帖

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

[复制链接]

119

主题

273

帖子

2552

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2552

版主

发表于 2019-4-25 09:49:07  | 显示全部楼层 | 阅读模式
(完整效果预览请查看附录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)


回复

使用道具 举报

0

主题

7

帖子

-6

积分

限制会员

积分
-6
发表于 2019-4-25 09:50:16  | 显示全部楼层
PHP是世界上最好的语言
回复 支持 反对

使用道具 举报

0

主题

10

帖子

-1

积分

限制会员

积分
-1
发表于 2019-4-25 09:51:25  | 显示全部楼层
老师,你上课么
回复 支持 反对

使用道具 举报

0

主题

0

帖子

-13

积分

限制会员

积分
-13
发表于 2019-4-25 09:52:03  | 显示全部楼层
往上顶!顶到所有人都看到为止!     
回复 支持 反对

使用道具 举报

0

主题

0

帖子

-32

积分

限制会员

积分
-32
发表于 2019-4-25 09:52:12  | 显示全部楼层
源码的老师都是好样的
回复 支持 反对

使用道具 举报

0

主题

3

帖子

-12

积分

限制会员

积分
-12
发表于 2019-4-25 09:52:19  | 显示全部楼层
我是来水贴的。
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表