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

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

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

看似简单，行亦难

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

(Image: Arnoldius)

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

Paper.js

使用 canvas 标签 制作简单图形. 创建你的canvas:（宽：300，高：300）

XML/HTML Code复制内容到剪贴板

   
1. <canvas id="canvas" width="300" height="300"></canvas>  

   
   

JavaScript Code复制内容到剪贴板

   
1. //加入JavaScript:  

   
2. //定义二维动画  

   
3. var canvas = $('#canvas')[0].getContext("2d");  

   
4. // 05－06：圆心x＝100，圆心y＝100, 半径＝15，初始角度＝0，结束＝360。,反时针。  

   
5. canvas.beginPath();  

   
6. canvas.arc(100, 100, 15, 0, Math.PI*2, true);  

   
7. // 结束  

   
8. canvas.closePath();  

   
9. // 填色  

   
10. canvas.fill();  

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

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

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

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

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

蒲公英绘图

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

XML/HTML Code复制内容到剪贴板

   
1. <script src="paper.js" type="text/javascript" charset="utf-8"></script>  

   
2. <script type="text/paperscript" canvas="canvas" src="dandelion.pjs" id="script"></script>  

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

JavaScript Code复制内容到剪贴板

   
1. var path = new Path();  

   
2. ／／#567e37是绿色。paper.js所用的颜色代码和css是共享的。  

   
3. path.strokeColor = '#567e37';  

   
4. ／／茎秆的粗是5  

   
5. path.strokeWidth = 5;  

   
6. ／／弧线原点:(0,550）  

   
7. var firstPoint = new Point(0, 550);  

   
8. path.add(firstPoint);  

   
9. ／／过度点(75,400) 顶点(100,250)。3个点足够定义一条弧线。。  

   
10. var throughPoint = new Point(75, 400);  

   
11. var toPoint = new Point(100, 250);  

   
12. ／／画弧线  

   
13. path.arcTo(throughPoint, toPoint);  

   
14. ／／弧线可见  

   
15. path.fullySelected = true;  

   
16. var circle = new Path.Circle(throughPoint, 5);  

   
17. ／／用红色标注过渡点。  

   
18. circle.fillColor = '#CC0000';  

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

JavaScript Code复制内容到剪贴板

   
1. var bulb = new Path.Circle(toPoint, 10);  

   
2. bulb.fillColor = '#567e37';  

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

(Image: Hmbascom)

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

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

JavaScript Code复制内容到剪贴板

   
1. var size = new Size(4, 10);  

   
2. var rectangle = new Rectangle(p, size);  

   
3. var bottom = new Path.Oval(rectangle);  

   
4. bottom.fillColor = '#d0aa7b';  

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

 

JavaScript Code复制内容到剪贴板

   
1. var stem = new Path();  

   
2. stem.strokeColor = '#567e37';  

   
3. stem.strokeWidth = 1;  

   
4. stem.add(new Point(p.x + 2, p.y));  

   
5. var throughPoint = new Point(p.x + 4, p.y - height / 2);  

   
6. var toPoint = new Point(p.x + 3, p.y - height);  

   
7. stem.arcTo(throughPoint, toPoint);  

   
   

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

 

JavaScript Code复制内容到剪贴板

   
1. for (var i = 0; i < random(4, 10); i++) {  

   
2. path = new Path();  

   
3. path.strokeColor = '#fff3c9';  

   
4. path.strokeWidth = 1;  

   
5. var p1 = new Point(p.x, p.y);  

   
6. path.add(new Point(p1.x + 2, p1.y + 2));  

   
7. // Each flutter extends a random amount up in the air  

   
8. var y = random(1, 5);  

   
9. // We draw every other stem on the right or the left so they're  

   
10. // spaced out in the seed.  

   
11. if (i % 2 == 0) {  

   
12. throughPoint = new Point(p1.x + random(1, 3), p1.y - y);  

   
13. toPoint = new Point(p1.x + random(5, 35), p1.y - 20 - y);  

   
14. } else {  

   
15. throughPoint = new Point(p1.x - random(1, 3), p1.y - y);  

   
16. toPoint = new Point(p1.x - random(5, 35), p1.y - 20 - y);  

   
17. }  

   
18. path.arcTo(throughPoint, toPoint);  

   
19. // Now we put the circle at the tip of the flutter.  

   
20. circle = new Path.Circle(toPoint, 2);  

   
21. circle.fillColor = '#fff3c9';  

   
22. }  

   
   

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

JavaScript Code复制内容到剪贴板

   
1. var group = new Group();  

   
2. group.addChild(bottom);  

   
3. group.addChild(stem);  

   
4. this.group = group;  

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

JavaScript Code复制内容到剪贴板

   
1. function Seed() {  

   
2. this.create = function (/*Point*/ p, /*boolean*/ shortStem) {  

   
3. …  

create在指定的坐标p 画短茎秆？或者长茎秆（boolean）

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

JavaScript Code复制内容到剪贴板

   
1. var seed = new Seed()  

   
2. seed.create(new Point(100, 100), false);  

完成之后：

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

种子图

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

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

JavaScript Code复制内容到剪贴板

   
1. var bulb = new Path.Circle(toPoint, 10); bulb.fillColor = '#567e37';  

   
2. var angle = 360 / bulb.length;  

   
3. var seeds = [];  

   
4. for (var i = 0; i < bulb.length; i++) {  

   
5. var seed = new Seed()  

   
6. seed.create(bulb.getPointAt(i));  

   
7. // 旋转种子让他们都向外弯曲  

   
8. seed.rotate(i * angle);  

   
9. seeds.push(seed);  

   
10. }  

 

以上代码绘制了以茎秆顶点为圆心的一小圈种子。

我们再加多一点种子来填补中心。中间的种子短一点，这样蒲公英看上去更加轻盈。

JavaScript Code复制内容到剪贴板

   
1. for (var i = 0; i < 18; i++) {  

   
2. var seed = new Seed()  

   
3. var point = new Point(toPoint.x + random(-3, 3),  

   
4. toPoint.y + random(-3, 3));  

   
5. seed.create(new Point(toPoint), true);  

   
6. seed.rotate(random(0, 360));  

   
7. seeds.push(seed);  

   
8. }  

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

绘制动画

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

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

   
       
           
           
       
   

1	this.dest = new Point(1800, random(-300, 1100));

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

 

JavaScript Code复制内容到剪贴板

   
1. this.rotateMove = function(/*int*/ angle) {  

   
2. if (this.group.position.x < 850 && this.group.position.y < 650) {  

   
3. var vector = this.dest - this.group.position;  

   
4. this.group.position += vector / 150;  

   
5. this.angle += angle;  

   
6. this.group.rotate(angle);  

   
7. } else {  

   
8. this.isOffScreen = true  

   
9. }  

   
10. }  

   
   

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

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

JavaScript Code复制内容到剪贴板

   
1. function onFrame(event) {  

   
2. for (var i = 0; i < seedCount; i++) {  

   
3. if (!seeds[i].isOffscreen()) {  

   
4. seeds[i].rotateMove(random(2, 4));  

   
5. }  

   
6. }  

   
7. }  

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

JavaScript Code复制内容到剪贴板

   
1. function start() {  

   
2. var id = setInterval(function() {  

   
3. seedCount++;  

   
4. if (seedCount === seeds.length) {  

   
5. clearInterval(id);  

   
6. }  

   
7. }, 1000);  

   
8. }  

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

查看蒲公英动画

Paper.js 的不足

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

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

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

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