如何用Paper.js制作网页动画

导读:在很长一段时间内,网页动画是有GIF和Flash主导的,他们会有一个独立于页面其他元素的板块,而不是像文字和图像那样自然地呈现。这个直到HTML5 Convas(画布)出现,一切都改变了。 canvas 把动画和手绘自然地融入到网页设计中。你可以把动画和文字结合起来并让他们互动。动画的效果变好了,编译是否也能简化?

这里介绍一种简单的编译达到同样的强大效果的动画制作:Paper.js   。这篇文章将介绍结合使用 canvas 和 paper.js 来制作自然唯美的动画效果:蒲公英在风中飘逸。分享所有的代码,并且进行逐行解析,最后有动画效果演示。

看似简单,行亦难

计算机喜欢干净简洁。不管是报表,统计,或者函数曲线,他们总是使用简洁明了的线条;而现实是,所有物理世界的物体是混沌的。树叶离开枝丫,水珠四溅 ,花朵迎风摇曳 - 所有这些物理世界的互动感觉简单,因为我们已经习惯这些。但是实际上哪怕是那一霎那的风,都是混沌的,她的算法非常复杂。这篇文章里面,我们要制作蒲公英种子微风舞动的动画。

(Image: Arnoldius)

动画制作的蒲公英没有办法模拟物理的复杂性,实际上她看上去更加自然如果我们不试图去模拟。我们将要制作一朵给你同样感觉的花朵但是省略了很多细节。

Paper.js

使用 canvas 标签 制作简单图形. 创建你的canvas:(宽:300,高:300)

掌握canvas的基本就很容易做这些,但是如果你要制作更加复杂的东西,你需要高级编译语言像Paper.js

Paper.js 是一个 JavaScript库用来制作绘图和动画, 一种Adobe Illustrator使用的基于Scriptographer的脚本语言 . 它自称是“矢量图脚本语言中的瑞士军刀”( “The Swiss Army Knife of Vector Graphics Scripting,” ),其中重点突出矢量。

图形制作中有两种:矢量图和栅格图。栅格图就像你照相机拍出来的图片,如果你放大看,就是颜色填充的方格。矢量图是有点连线组成的。他们是不同的线条租和形状组,根据不同的指令绘图。如果用矢量图,如图,这个Z放大后还是线条光滑,色泽饱满。相比较,左边的栅格图就很模糊了。

矢量图库用于动画制作再完美不过,因为调解大小,旋转,和移动都非常容易操作完成,且快捷,因为同样的效果他们所需要使用的编译代码少。(参见样本代码)

我们的蒲公英动画也可以在样本代码页找到.你可以通过改编码看见不同的效果,是比较高效率的学习方法。

蒲公英绘图

先加入paper.js和javaScript库.text/paperscript表明是用来跑动画的.

先画蒲公英的茎干:绿颜色的一条弧线,顶端是个圆形用来代表花骨朵。 我们通过path这个变量来画这两个形状。path是动画制作的基本单位。他们可以完成线条,曲线和多边形。从path出发,我们的脚本会编译各种形状,图形,点、线,等网页上需要用来完成动画的操作。

顶端花骨朵,绿色,半径10;绘制蒲公英种子

每颗蒲公英的种子都有个顶端花苞,茎秆,和打开的伞形。

(Image: Hmbascom)

我们的种子先从底部的鹅蛋形和茎秆开始。鹅蛋形就是圆形四角的长方形

宽4,长10 的长方形 -> 变身鹅蛋形(oval)然后填色

每棵种子都是一条弧线,就是比蒲公英的茎秆要细。

用之前同样的方法画茎秆。茎秆顶部随机数量的缕随意地向外弯曲。随机性用random()完成。我们的种子每棵随机的4-10株缕丝

现在我们有了种子了,我们要管理这些种子; 之后我们还要能够移动、旋转他们。我们用Paper.js 里面组( group object)来实现群体管理.

种子( Seed)代码.我们把之前画茎秆和缕丝的代码全都加到种子(seed object)里面。用create来初始化这个object.

create在指定的坐标p 画短茎秆?或者长茎秆(boolean)

以下constructor在JavaScript上是不工作的,但是paper.js支持。

完成之后:

种子 (Seed object )会随机地制作单个蒲公英种子。加入随机(看上去更加自然)

种子图

加入一点随意增加花朵的自然美

我们把每棵种子加在蒲公英花骨朵的圆周上。圆周是另一种path,用以下方法绘制。

接下去我们要让她们飘逸起来。

绘制动画

风吹舞动的蒲公英是个复杂的物力运动,没有两棵种子的行迹会完全相同。我们需要加入随机来模拟这种自然现象。

我们不会试图去模拟风吹舞动,我们需要做的是种子随机的在空中的运动曲线,为此我们设定每一颗种子的最终着陆点随机。

rotateMove 函数转动推送每棵种子去着陆点。这里的group就是每棵种子(参照蒲公英种子图。)

这个函数完成了种子飞向最后着陆点的算法 (就是我们的种子飞舞动画)

Paper.js为我们提供了一个onFrame函数:每个frame,我们过一遍我们的种子,并完成她们移动的动画;每一个帧都用onFrame起始

每棵种子都是同时飘落,但是着陆的时间不一样,最后用一个计时来完成这个随机。

最后加上一点蓝天,白云和绿草,我们的蒲公英就完成了。

查看蒲公英动画

Paper.js 的不足

Paper.js 是有很多亮点但是也有不足。

它不支持老版本浏览器:需要Internet Explorer 9+, Firefox 4+, Safari 5+ or Chrome

性能会比较慢:Pixar的伍迪是用服务器集群完成的,而你只有你的笔记本。为了保证动画的最终效果,需要在比较差的浏览器上测试你的程序的性能。

移动设备会更慢 移动设备支持Canvas,但是跑它会比较慢。我们用ipad2测试过蒲公英,不是很顺畅。

原文地址:http://coding.smashingmagazine.com/2011/11/21/create-web-animations-with-paperjs/

1 收藏 评论

关于作者:潘文佳

潘文佳:软件工程师。从事iPhone/iPad、Android手机应用开发。关注移动应用产品设计和市场展望。(新浪微博:@小粉豬潘小佳) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部