如何用Paper.js制作网页动画
导读:在很长一段时间内,网页动画是有GIF和Flash主导的,他们会有一个独立于页面其他元素的板块,而不是像文字和图像那样自然地呈现。这个 直到HTML5 Convas(画布)出现,一切都改变了。 canvas 把动画和手绘自然地融入到网页设计中。你可以把动画和文字结合起来并让他们互动。动画的效果变好了,编译是否也能简化?
这里介绍一种简单的编译达到同样的强大效果的动画制作:Paper.js 。这篇文章将介绍结合使用 canvas 和 paper.js 来制作自然唯美的动画效果:蒲公英飘逸在风中。分享所有的代码,并且进行逐行解析,最后有动画效果演示。
看似简单,行亦难
计算机喜欢干净简洁。不管是报表,统计,或者函数曲线,他们总是使用简洁明了的线条;而现实是,所有物理世界的物体是混沌的。树叶离开枝丫,水珠四 溅 ,花朵迎风摇曳 - 所有这些物理世界的互动感觉简单,因为我们已经习惯这些。但是实际上哪怕是那一霎那的风,都是混沌的,她的算法非常复杂。这篇文章里面,我们要制作蒲公英 种子微风舞动的动画。
(Image: Arnoldius)
动画制作的蒲公英没有办法模拟物理的复杂性,实际上她看上去更加自然如果我们不试图去模拟。我们将要制作一朵给你同样感觉的花朵但是省略了很多细节。
Paper.js
使用 canvas 标签 制作简单图形. 创建你的canvas:(宽:300,高:300)
1
2
|
<canvas id= "canvas" width= "300" height= "300" ></canvas> //加入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
|
<script src= "paper.js" type= "text/javascript" charset= "utf-8" ></script> <script type= "text/paperscript" canvas= "canvas" src= "dandelion.pjs" id= "script" ></script> |
先画蒲公英的茎干:绿颜色的一条弧线,顶端是个圆形用来代表花骨朵。 我们通过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/