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

标签： HTML5学习资源 | 发表时间：2011-12-12 10:25 | 作者：xielisha
出处：http://www.mhtml5.com

导读：在很长一段时间内，网页动画是有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/


相关 [paper js 制作] 推荐：
Paper Mache：从 webOS 到 Android

-  - 爱范儿 · Beats of Bits

Paper Mache 原本是 TouchPad 平板电脑上的一款免费离线阅读软件. 它跟 Instapaper的功能相似——把用户感兴趣的文章和图片保存下来，供以后阅读——当然它也提供了 Instapaper 账户的同步功能. 它的开发者   Ryan Watkins 认为这是 webOS 平板上最优秀的阅读器之一，一切交互元素和手势操作都按照 webOS 的规则来进行. 
碎纸机抱枕：Cushion Maker Paper

- Mingrui - 爱…稀奇~{新鲜:科技:创意:有趣}

许多现代化的办公室都装备有碎纸机——好吧，的确很方便，但是那些被销毁的纸张，除了被扔进垃圾堆，就没有别的什么更好归宿了么. 设计师Gyeongwan Koo显然并不这么看，他认为，这些纸屑完全可以变成抱枕：. 简单地说，哥们将碎纸机变成了生产抱枕的流水线，一头塞进需要粉碎的文档，一头用专用的容器接住纸屑，封装起来就能变成一个纸枕头——马上就冬天了，必须承认，这样的一个设备应该可以让全公司的妹纸温暖过冬吧~. 
E Paper ：新智能手机显示屏

- Johnny - 爱范儿 · Beats of Bits

我们曾向大家介绍过 E Ink 技术，称之为显示技术的未来. E Paper 简单来说即是由 E Ink 组成的可弯曲，无需照明设施的塑料材质显示屏（只在屏幕内容产生变化时需要少量电量来重组 E Ink）. 运用 E Ink 技术的黑白电子阅读器凭借低电耗又保护视力的优势， 在 2011 年世界销量预计超过 1 100万. 
读paper：腾讯实时推荐实践

-  - 冰火岛

阅读TencentRec: Real-time Stream Recommendation
inPractice. 大数据环境下的实时推荐需求，克服三大难题：大数据，实时性，准确度；. 大数据，用户数据，业务数据；实时基于storm处理；算法主要基于item-based，content-based，demographic，并且. 
如何快速读Paper – ThoughtWorks洞见

-  - 

去哪里找paper之后，大家问我的问题就常常变成了：. 如何快速阅读一篇paper并准确的提取其中有用的信息. 在本文中，我将试图为大家简要解答这个问题，争取告诉大家如何在短时间内通过阅读文献的方式了解一个新的领域. 阅读一篇paper通常见的目的有四种：. 面对一个新的领域，我要快速把握这个领域的研究方向和state-of-the-art方法，来给自己或者团队设计一个大致的技术方案. 
WebView JS 交互

-  - ITeye博客

WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中，. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件. 
装上Paper，iPad一秒变身涂鸦本

-  - Tech2IPO

涂鸦是人类的天性，是自我表达欲望的自然流露. 但是与说话相比，写写画画没有那么便利，所以我们经常能见到“话痨”，但不会有太多机会见到“画痨”. 前不久开始火爆的  Draw Something成功的原因相信就是释放了人们涂鸦的天性，那是一种最简单的快乐. 当我们每次在屏幕上点点画画的时候，所思所想无法方便快捷地在设备上自由地记录，有些奇思妙想因此转瞬即逝，过后无法再追踪总是一种遗憾. 
Paper：充满诚意的内容阅读产品，Made by Facebook

-  - PingWest中文网

“这是Facebook最好的应用. ”科技博客The Verge这么评价Facebook最新推出的新闻类应用Paper. 而TechCrunch的评价是，“它有可能成为Facebook官方应用的替代品. Facebook的移动应用并不出色，但是Paper却让人眼前一亮. 简单说，Paper就是纯内容的Facebook. 
新闻阅读器Paper对Facebook有多重要？

-  - PingWest中文网

根据Re/code的报道，Facebook将在几周内发布类似Flipboard的阅读应用Paper，不仅如此，他们称  Facebook正在招募编辑来为内容做人工筛选. Paper是Facebook的秘密项目，用户可以利用Paper阅读到来自传统出版物的内容、好友状态更新和Instagram照片等内容. 
JS游戏引擎

- 米随随 - HTML5研究小组

If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.