如何用Paper.js制作网页动画
导读：在很长一段时间内，网页动画是有GIF和Flash主导的，他们会有一个独立于页面其他元素的板块，而不是像文字和图像那样自然地呈现。这个 直到HTML5 Convas(画布)出现，一切都改变了。 canvas 把动画和手绘自然地融入到网页设计中。你可以把动画和文字结合起来并让他们互动。动画的效果变好了，编译是否也能简化？
这里介绍一种简单的编译达到同样的强大效果的动画制作：Paper.js 。这篇文章将介绍结合使用 canvas 和 paper.js 来制作自然唯美的动画效果：蒲公英飘逸在风中。分享所有的代码，并且进行逐行解析，最后有动画效果演示。
看似简单，行亦难
计算机喜欢干净简洁。不管是报表，统计，或者函数曲线，他们总是使用简洁明了的线条；而现实是，所有物理世界的物体是混沌的。树叶离开枝丫，水珠四 溅 ，花朵迎风摇曳 － 所有这些物理世界的互动感觉简单，因为我们已经习惯这些。但是实际上哪怕是那一霎那的风，都是混沌的，她的算法非常复杂。这篇文章里面，我们要制作蒲公英 种子微风舞动的动画。
(Image: Arnoldius)
动画制作的蒲公英没有办法模拟物理的复杂性，实际上她看上去更加自然如果我们不试图去模拟。我们将要制作一朵给你同样感觉的花朵但是省略了很多细节。
Paper.js
使用 canvas 标签 制作简单图形. 创建你的canvas:（宽：300，高：300）
|
1
2
|
//加入JavaScript:
|
|
1
2
|
//定义二维动画
var canvas = $( '#canvas' )[0].getContext( "2d" );
|
|
1
2
3
4
5
6
7
8
9
|
// 05－06：圆心x＝100，圆心y＝100, 半径＝15，初始角度＝0，结束＝360。,反时针。
canvas.beginPath();
canvas.arc(100, 100, 15, 0, Math.PI*2, true );
// 结束
canvas.closePath();
// 填色
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表明是用来跑动画的.
|
1
2
|
|
先画蒲公英的茎干：绿颜色的一条弧线，顶端是个圆形用来代表花骨朵。 我们通过path这个变量来画这两个形状。path是动画制作的基本单位。他们可以完成线条，曲线和多边形。从path出发，我们的脚本会编译各种形状，图形，点、线，等网页上需要用来完成动画的操作。
|
1
2
3
|
var path = new Path();
／／#567e37是绿色。paper.js所用的颜色代码和css是共享的。
path.strokeColor = '#567e37' ;
|
|
1
2
|
／／茎秆的粗是 5
path.strokeWidth = 5 ;
|
|
1
2
3
|
／／弧线原点:( 0 , 550 ）
var firstPoint = new Point( 0 , 550 );
path.add(firstPoint);
|
|
1
2
3
|
／／过度点( 75 , 400 ) 顶点( 100 , 250 )。 3 个点足够定义一条弧线。。
var throughPoint = new Point( 75 , 400 );
var toPoint = new Point( 100 , 250 );
|
|
1
2
|
／／画弧线
path.arcTo(throughPoint, toPoint);
|
|
1
2
3
4
|
／／弧线可见
path.fullySelected = true ;
var circle = new Path.Circle(throughPoint, 5 );
|
|
1
2
|
／／用红色标注过渡点。
circle.fillColor = '#CC0000' ;
|
顶端花骨朵，绿色，半径10；绘制蒲公英种子
|
1
2
|
var bulb = new Path.Circle(toPoint, 10);
bulb.fillColor = '#567e37' ;
|
每颗蒲公英的种子都有个顶端花苞，茎秆，和打开的伞形。
(Image: Hmbascom)
我们的种子先从底部的鹅蛋形和茎秆开始。鹅蛋形就是圆形四角的长方形
宽4，长10 的长方形 －> 变身鹅蛋形(oval)然后填色
|
1
2
3
4
|
var size = new Size(4, 10);
var rectangle = new Rectangle(p, size);
var bottom = new Path.Oval(rectangle);
bottom.fillColor = '#d0aa7b' ;
|
每棵种子都是一条弧线，就是比蒲公英的茎秆要细。
|
1
2
3
4
5
6
7
8
|
var stem = new Path();
stem.strokeColor = '#567e37' ;
stem.strokeWidth = 1;
stem.add( new Point(p.x + 2, p.y));
var throughPoint = new Point(p.x + 4, p.y - height / 2);
var toPoint = new Point(p.x + 3, p.y - height);
stem.arcTo(throughPoint, toPoint);
|
用之前同样的方法画茎秆。茎秆顶部随机数量的缕随意地向外弯曲。随机性用random()完成。我们的种子每棵随机的4－10株缕丝
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
for ( var i = 0; i < random(4, 10); i++) {
path = new Path();
path.strokeColor = '#fff3c9' ;
path.strokeWidth = 1;
var p1 = new Point(p.x, p.y);
path.add( new Point(p1.x + 2, p1.y + 2));
// Each flutter extends a random amount up in the air
var y = random(1, 5);
// We draw every other stem on the right or the left so they're
// spaced out in the seed.
if (i % 2 == 0) {
throughPoint = new Point(p1.x + random(1, 3), p1.y - y);
toPoint = new Point(p1.x + random(5, 35), p1.y - 20 - y);
} else {
throughPoint = new Point(p1.x - random(1, 3), p1.y - y);
toPoint = new Point(p1.x - random(5, 35), p1.y - 20 - y);
}
path.arcTo(throughPoint, toPoint);
// Now we put the circle at the tip of the flutter.
circle = new Path.Circle(toPoint, 2);
circle.fillColor = ' #fff3c9';
}
|
现在我们有了种子了，我们要管理这些种子; 之后我们还要能够移动、旋转他们。我们用Paper.js 里面组（ group object）来实现群体管理.
|
1
2
3
4
5
|
var group = new Group();
group.addChild(bottom);
group.addChild(stem);
this .group = group;
|
种子（ Seed）代码.我们把之前画茎秆和缕丝的代码全都加到种子（seed object）里面。用create来初始化这个object.
|
1
2
3
4
|
function Seed() {
this .create = function ( /*Point*/ p, /*boolean*/ shortStem) {
…
|
create在指定的坐标p 画短茎秆？或者长茎秆（boolean）
以下constructor在JavaScript上是不工作的，但是paper.js支持。
|
1
2
|
var seed = new Seed()
seed.create( new Point(100, 100), false );
|
完成之后：
种子 （Seed object ）会随机地制作单个蒲公英种子。加入随机（看上去更加自然）
种子图
加入一点随意增加花朵的自然美
我们把每棵种子加在蒲公英花骨朵的圆周上。圆周是另一种path，用以下方法绘制。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var bulb = new Path.Circle(toPoint, 10); bulb.fillColor = '#567e37' ;
var angle = 360 / bulb.length;
var seeds = [];
for ( var i = 0; i < bulb.length; i++) {
var seed = new Seed()
seed.create(bulb.getPointAt(i));
// 旋转种子让他们都向外弯曲
seed.rotate(i * angle);
seeds.push(seed);
}
|
以上代码绘制了以茎秆顶点为圆心的一小圈种子。
我们再加多一点种子来填补中心。中间的种子短一点，这样蒲公英看上去更加轻盈。
|
1
2
3
4
5
6
7
8
|
for ( var i = 0; i < 18; i++) {
var seed = new Seed()
var point = new Point(toPoint.x + random(-3, 3),
toPoint.y + random(-3, 3));
seed.create( new Point(toPoint), true );
seed.rotate(random(0, 360));
seeds.push(seed);
}
|
接下去我们要让她们飘逸起来。
绘制动画
风吹舞动的蒲公英是个复杂的物力运动，没有两棵种子的行迹会完全相同。我们需要加入随机来模拟这种自然现象。
我们不会试图去模拟风吹舞动，我们需要做的是种子随机的在空中的运动曲线，为此我们设定每一颗种子的最终着陆点随机。
|
1
|
this .dest = new Point(1800, random(-300, 1100));
|
rotateMove 函数转动推送每棵种子去着陆点。这里的group就是每棵种子（参照蒲公英种子图。）
|
1
2
3
4
5
6
7
8
9
10
11
|
this .rotateMove = function ( /*int*/ angle) {
if ( this .group.position.x < 850 && this .group.position.y < 650) {
var vector = this .dest - this .group.position;
this .group.position += vector / 150;
this .angle += angle;
this .group.rotate(angle);
} else {
this .isOffScreen = true
}
}
|
这个函数完成了种子飞向最后着陆点的算法 （就是我们的种子飞舞动画）
Paper.js为我们提供了一个onFrame函数：每个frame，我们过一遍我们的种子，并完成她们移动的动画；每一个帧都用onFrame起始
|
1
2
3
4
5
6
7
|
function onFrame(event) {
for ( var i = 0; i < seedCount; i++) {
if (!seeds[i].isOffscreen()) {
seeds[i].rotateMove(random(2, 4));
}
}
}
|
每棵种子都是同时飘落，但是着陆的时间不一样，最后用一个计时来完成这个随机。
|
1
2
3
4
5
6
7
8
9
|
function start() {
var id = setInterval( function () {
seedCount++;
if (seedCount === seeds.length) {
clearInterval(id);
}
}, 1000);
}
|
最后加上一点蓝天，白云和绿草，我们的蒲公英就完成了。
查看 蒲公英动画
Paper.js 的不足
Paper.js 是有很多亮点但是也有不足。
它不支持老版本浏览器：需要Internet Explorer 9+, Firefox 4+, Safari 5+ or Chrome
性能会比较慢：Pixar的伍迪是用服务器集群完成的，而你只有你的笔记本。为了保证动画的最终效果，需要在比较差的浏览器上测试你的程序的性能。
移动设备会更慢 移动设备支持Canvas，但是跑它会比较慢。我们用ipad2测试过蒲公英，不是很顺畅。
本文来自： http://blog.jobbole.com/8295/
英文原文： http://coding.smashingmagazine.com/2011/11/21/create-web-animations-with-paperjs/