导读：在很长一段时间内，网页动画是有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 |
|
1 |
|
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(0triped-line" id="crayon-5812eccfba35c890972641-2">var firstPoint = new Point(0.js 。这篇文章将介绍结合使用 canvas 和 paper.js 来制作自然唯美的动画效果：蒲公英在风中飘逸。分享所有的代码，并且进行逐行解析，最后有动画效果演示。
看似简单，行亦难 计算机喜欢干净简洁。不管是报表，统计，或者函数曲线，他们总是使用简洁明了的线条；而现实是，所有物理世界的物体是混沌的。树叶离开枝丫，水珠四溅 ，花朵迎风摇曳 － 所有这些物理世界的互动感觉简单，因为我们已经习惯这些。但是实际上哪怕是那一霎那的风，都是混沌的，她的算法非常复杂。这篇文章里面，我们要制作蒲公英种子微风舞动的动画。
(Image: Arnoldius) 动画制作的蒲公英没有办法模拟物理的复杂性，实际上她看上去更加自然如果我们不试图去模拟。我们将要制作一朵给你同样感觉的花朵但是省略了很多细节。
Paper.js 使用 canvas 标签 制作简单图形. 创建你的canvas:（宽：300，高：300）
掌握canvas的基本就很容易做这些，但是如果你要制作更加复杂的东西，你需要高级编译语言像Paper.js Paper.js 是一个 JavaScript库用来制作绘图和动画， 一种Adobe Illustrator使用的基于Scriptographer的脚本语言 . 它自称是“矢量图脚本语言中的瑞士军刀”（ “The Swiss Army Knife of Vector Graphics Scripting,” ），其中重点突出矢量。 图形制作中有两种：矢量图和栅格图。栅格图就像你照相机拍出来的图片，如果你放大看，就是颜色填充的方格。矢量图是有点连线组成的。他们是不同的线条租和形状组，根据不同的指令绘图。如果用矢量图，如图，这个Z放大后还是线条光滑，色泽饱满。相比较，左边的栅格图就很模糊了。
矢量图库用于动画制作再完美不过，因为调解大小，旋转，和移动都非常容易操作完成，且快捷，因为同样的效果他们所需要使用的编译代码少。（参见样本代码） 我们的蒲公英动画也可以在样本代码页找到.你可以通过改编码看见不同的效果，是比较高效率的学习方法。 蒲公英绘图 先加入paper.js和javaScript库.text/paperscript表明是用来跑动画的.
先画蒲公英的茎干：绿颜色的一条弧线，顶端是个圆形用来代表花骨朵。 我们通过path这个变量来画这两个形状。path是动画制作的基本单位。他们可以完成线条，曲线和多边形。从path出发，我们的脚本会编译各种形状，图形，点、线，等网页上需要用来完成动画的操作。
|
