使用Paper.js创建HTML5交互式矢量动画

随着新的JavaScript框架似乎每天出现,利用HTML5,确定哪一个适合手头的项目是具有挑战性的。在本教程中,我们(那是Woohoo博士,Claus Wahlers和Rasmus Blaesbjerg来自HAUS)将要看看引擎盖,看看是什么Paper.js(由令人难以置信的开发Jrg Lehni乔纳森·普奇)必须为我们提供跨平台的基于矢量的动画和交互性。我们还将探索它构建的基础是多么可靠,最后对于高级开发人员的新手来说是多么容易理解和理解。

在我们深入研究本教程代码的底层方法之前,我们将简要介绍Paper.js及其前身Scriptographer的历史,以及如何在框架内从顶层组织对象。底部视图。

历史

Paper.js--于2011年6月底公开发布 - 诞生于Scriptographer,这是一个令人难以置信的Adobe Illustrator脚本插件。这一点非常重要,因为Scriptographer是在2001年推出的,它提供了10年强大的迭代开发和增强功能,与其他一些现有的基于矢量的JavaScript框架相比。

Illustrator的脚本插件?如果您还没有使用过Scriptographer,那么您将错失很多乐趣,但更重要的是,这是一个可以说是现代设计师基本资产的概念 - 这就是将代码和设计结合起来的能力。为了使设计过程自动化,并通过创新设计扩展创造性的可能性。

生成设计输出 - 图像,声音,建筑模型,动画 - 是由一组规则或一组规则生成的设计方法算法,通常使用计算机程序。“ -维基百科

文档对象模型

Paper.js使用经过深思熟虑的文档对象模型(DOM) - 与其父级Scriptographer的谱系 - 以易于理解的方式构造其对象。此外,如果您熟悉Adobe Illustrator的ExtendScript DOM,那么您将对Paper.js感到满意。如果您是Paper.js的新手,但已经使用Illustrator作为设计师并了解您的JavaScript基础知识,我愿意打赌DOM的层次结构将是您的第二天性。

Adobe Illustrator Document, Layer and Compound Path

Adobe Illustrator文档,图层和复合路径

要理解Paper.js的DOM的层次结构,使用Illustrator作为隐喻可能更容易。

在上图中,我们有:1)在Illustrator中打开的文档有多个图层2)在选定的(活动)图层'HAUS徽标'3)上有一个复合路径。

除了Document被称为Project之外,Paper.js的DOM中的结构是相同的。因此,代码将逐步遍历每个对象:Project.Layer.CompoundPath。

项目:ActiveLayer

我通常首先创建变量,这些变量是对当前项(层,符号,视图等)的引用项目。在这种情况下,我们只对当前感兴趣ActiveLayer项目的时候,我们将在以后使用层中包含的内容时使用它。

var layer = project.activeLayer;

项目:CurrentStyle

CurrentStyle定义当前样式。在定义样式后选择或创建的所有项目都将使用此样式。

project.currentStyle.fillColor = new RGBColor(1.0,1.0,1.0);

创建矩形和圆形路径

如果您在图像1中回想起来,则会有一个矩形和圆形一起创建复合路径。可以使用各种技术创建新形状的路径项(线,矩形,圆形,椭圆形,圆形,圆弧形,规则角形和星形),包括定义点和大小:

// Path.Rectangle(point,size)var rect = new Path.Rectangle([200,200],[300,300]);

注意:Rectangle的原点位于左上角。

要匹配HAUS徽标,我们需要旋转长方形45º:

Rect.rotate(45);

接下来,我们在徽标中创建中心圆,定义中心点和半径:

// Path.Circle(center,radius)var circ = new Path.Circle(rect.position,29);

请注意,即使我们创建了一个新的,它是不可见的。它实际上在那里,它与矩形颜色相同。仔细观察图像1,注意圆圈在矩形的中心创建了一个孔。这是CompoundPath的一个功能。

将它们组合成CompoundPath

创造CompoundPath,我们创建它的一个实例并包含我们之前创建的PathItems。

var shape = new CompoundPath(rect,circ); shape.fillColor = new RGBColor(0.95,0.95,0.95);

现在,圈子在矩形的中间创建了一个洞。现在是时候添加一些克劳斯的神奇亮点和阴影。哇噢!

阴影和亮点

向CompoundPath添加阴影和高光有两种方法:使用HTML5 Canvas Shadows API或伪造它。 Claus的第一次尝试是使用Shadows API。不幸的是,Safari和Chrome都将shadowOffsetX和shadowOffsetY参数值四舍五入为整数,从而导致这些浏览器中的动画产生颠簸。

为了伪造阴影并突出显示,我们将使用clone()函数,position和fillColor属性。在创建CompoundPath之后,我们将此实例传递给makeShadow()方法,该方法将采用形状,对阴影进行两次克隆,对高光进行两次克隆,并为每个克隆形状设置position和fillColor。然后,它将获取四个克隆的形状以及原始形状,并将它们作为组项返回。

function makeShadow(path){var shadow1 = path.clone(); shadow1.fillColor = new RGBColor(0.92,0.92,0.92); var shadow2 = path.clone(); shadow2.fillColor = new RGBColor(0.84,0.84,0.84); var highlight1 = path.clone(); highlight1.fillColor = new RGBColor(1,1,1); var highlight2 = path.clone(); highlight2.fillColor = new RGBColor(0.97,0.97,0.97);返回新组([highlight2,highlight1,shadow1,shadow2,path]);}

如果你现在看过,那就是新阴影并突出显示CompoundPaths会在那里;但是,它们会隐藏在原始的CompoundPath下。

为了使它们不被隐藏,我们需要做另一个技巧:偏移原始CompoundPath的阴影和高光。

偏移阴影和高光

我们需要调用方法adjustShadow()以偏移当前隐藏在原始CompoundPath下面的Shadow和Highlight CompoundPath。

下面:

var group = makeShadow(shape);

加:

adjustShadow(group,new Point(1,1));

因此,在创建阴影和高光复合路径后,它们的位置会偏移,因此他们现在可见了感谢以下方法:

function adjustShadow(group,vector){var position = group.lastChild.position; group.children [0] .position = position + vector * 3; group.children [1] .position = position + vector * 1.5; group.children [2] .position = position + vector * -3; group.children [3] .position = position + vector * -1.5;}

工具:鼠标事件处理程序

我们想要添加的最后一点魔法就是能够根据鼠标的位置调整光源的方向。

通过为onMouseMove添加一个方法,我们想要计算出CompoundPaths组的中心与鼠标位置之间的距离。然后,我们用最小值和最大值钳制向量的长度。这反过来创造了幻觉我们正在控制光的方向

特别感谢Jonathan花时间为收紧这篇文章提出了很好的建议。

其他资源

Paper.js

Paperjs.org/tutorials/

Scriptographer
Scriptographer.org/tutorials/

处理

Paper.js的一些示例来自此处:processing.org/learning/topics/follow3.html

HTML5画布
www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html



翻译字数超限