HTML5

[ 登陆论坛 注册 ] 设为首页 收藏本站 网站地图 RSS地图 
热搜： CSS3教程 HTML5 canvas教程 canvas 3d mozilla html5 canvas html5 canvas html5 Canvas html5 canvas html5资讯
你所在的位置：首 页 > HTML5特性 > Canvas >

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

发布时间：2011-12-12 作者：小想 来源：未知 我要评论

导读：在很长一段时间内，网页动画是有GIF和Flash主导的，他们会有一个独立于页面其他元素的板块，而不是像文字和图像那样自然地呈现。这个 直到HTML5 Convas(画布)出现，一切都改变…

 导读：在很长一段时间内，网页动画是有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测试过蒲公英，不是很顺畅。

 

你可能喜欢阅读以下文章

【责任编辑：小想】

>
数据统计中！！

上一篇：HTML5 Canvas 视差滚动背景的OOP实现
下一篇：使用HTML5 canvan进行Web绘图
返回Canvas

编辑推荐文章

使用HTML5 canvan进行Web绘图

使用HTML5 canvan进行Web绘图
背景介绍 HTML5 中新引入的 canvas 元素使得 Web 开发人员在无须借助任何第三方插件（如 Flash，Silv...

网友评论TOP10

查看所有评论

我要评论请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

验证码: 点击我更换图片

更多相关文章

更多推荐文章

栏目热门

热门标签：　Html5下载 　开发工具 　HTML5工具 　html5 　canvas 　视频 　css3 　html5视频 　webgl 　HTML5 下载