您正在使用陈旧(Internet Explorer 6)浏览网页,如果您升级到. Internet Explorer 8 转换到另一个浏览器,本站 将能为您提供更好的服务。了解如何更新您的浏览器.
X
Articles

导入我们的JavaScript另类Flash网站TVCD设计解说(三)

第一步是导入我们的JavaScript和PaperScript文件。

1 < 字体> < 字体> < 脚本 的src = “paper.js” 类型= “文本/ javascript” 字符集= “UTF-8” > </ SCRIPT > < FONT > < / FONT > < FONT > < / FONT > < 字体> < 字体>
2 < 脚本 类型= “/ paperscript” 帆布 = “dandelion.pjs” ID = “脚本” > </ SCRIPT > < / FONT > < / FONT >

运行动画PaperScript的代码被宣布文/ paperscript现在我们准备开始绘制。

第一部分是我们的蒲公英干。干是绿色的弧线,在灯泡上方的圆。我们将用两个形状路径,形状,点和线指示浏览器来显示列表。

路径动画的基本构建块。他们呈现直线,曲线和多边形。您也可以填写他们在复杂形状。我们的路径看起来像这样:

01 <FONT> <FONT> VAR的路径=新路径(); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
02 path.strokeColor ='#567e37; </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
03 path.strokeWidth = 5; </ FONT> </ FONT> <FONT> </ FONT>
04 <FONT> </ FONT> <FONT> <FONT>
05 firstPoint =新点(0550); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
06 (path.add firstPoint); </ FONT> </ FONT> <FONT> </ FONT>
07 <FONT> </ FONT> <FONT> <FONT>
08 throughPoint =新点(75,400); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
09 尖点=新的点(10.025万); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
10 (path.arcTo throughPoint,尖点); </ FONT> </ FONT>

我们的道路是一条弧线,所以它需要三个要点:开始,结束和一个弧的中点。有三点足以定义任何我们所需要的弧。包含arcTo函数绘制了它们之间的线。路径项目还支持造型信息,如中风颜色和笔划宽度; #567e375将会使我们电弧线绿色和厚。paper.js支持相同的颜色定义为CSS。

我们可以添加一些更多的项目,以使这一切更容易看到:

1 <FONT> <FONT> path.fullySelected =真; </ FONT> </ FONT> <FONT> </ FONT>
2 <FONT> </ FONT> <FONT> <FONT>
3 圈=新Path.Circle(throughPoint,5)</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
4 circle.fillColor = '#CC0000' ; </ FONT> </ FONT>

充分选择的路径将显示一些线,向我们展示了电弧;我们通过点是红色圆圈显示。

微播音乐设计网

显示花球,给我们一个地方附加的所有种子干结束了一圈。圆圈多在Paper.js更容易比直接帆布

1 <FONT> <FONT>鳞茎=新Path.Circle(尖点,10); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
2 bulb.fillColor =“#567e37”的; </ FONT> </ FONT>

一行代码绘制我们的圈子,一个更使得绿色,现在我们已经准备好加入我们的种子。

绘制的TVCD网站设计

每个种子都有一个灯泡,一点点干,并在上面稀疏的部分。

我们的种子开始为椭圆形的小灯泡和干弧。椭圆形的是一个带圆角的矩形:

1 <FONT> <FONT> VAR 的大小=新的大小(4,10); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
2 矩形=新的矩形(P,大小); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
3 底部=新Path.Oval(矩形); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
4 bottom.fillColor ='#d0aa7b“; </ FONT> </ FONT>

种子干是另一个圆弧,但是这一次是比花茎细:

1 <FONT> <FONT>功干=新路径(); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
2 stem.strokeColor ='#567e37; </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
3 stem.strokeWidth = 1 </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
4 stem.add(新点(PX + PY)2); </ FONT> </ FONT> <FONT> </ FONT>
5 <FONT> </ FONT> <FONT> <FONT>
6 throughPoint =新点(PX,PY - 身高/ 2)</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
7 尖点=新的点(像素+ 3坪 - 高度); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
8 (stem.arcTo throughPoint,尖点); </ FONT> </ FONT>

鬼火是一个圆的弧线,在每一行的末尾。每个种子都有一个随机数,在干在不同方向的弧线和曲线的顶部开始的缕缕。随机性使得他们看起来有点凌乱,从而更自然。每个种子得到了缕缕的随机数,4和10之间。

01 <FONT> <FONT>(VAR的我= 0;我<随机(4,10);我){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
02     路径=新路径(); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
03     path.strokeColor =#fff3c9的; </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
04     path.strokeWidth = 1 </ FONT> </ FONT> <FONT> </ FONT>
05 <FONT> </ FONT> <FONT> <FONT>
06     P1 =新点(PX,PY)</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
07     path.add(p1.x 2,新点(p1.y 2)); </ FONT> </ FONT> <FONT> </ FONT>
08 <FONT> </ FONT> <FONT> <FONT>
09     / /每个扑扩展在空气大全 - 宜配网随机金额高达</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
10     为Y =随机(1,5); </ FONT> </ FONT> <FONT> </ FONT>
11 <FONT> </ FONT> <FONT> <FONT>
12     / /我们当前借鉴的右侧或左侧所有其他干,所以他们</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
13     / /间隔在种子。</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
14     (%2 == 0){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
15         throughPoint =新点(p1.x +随机(1,3) - Ÿp1.y); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
16         尖山=新点(p1.x +随机(5,35),p1.y - 20 - y); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
17     }否则{</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
18         throughPoint =新点(p1.x - 随机(1,3),p1.y - y); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
19         尖点=新的点(p1.x - 随机(5,35),p1.y - 20 - y); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
20     } </ FONT> </ FONT> <FONT> </ FONT>
21 <FONT> </ FONT> <FONT> <FONT>
22     (path.arcTo throughPoint,尖点); </ FONT> </ FONT> <FONT> </ FONT>
23 <FONT> </ FONT> <FONT> <FONT>
24     / /现在我们当前把扑尖圆。</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
25     =新Path.Circle圈(尖点,2); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
26     circle.fillColor ='#fff3c9“; </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
27 } </ FONT> </ FONT>

现在,我们已经得出的种子,我们需要管理后,我们将要移动和旋转。种子是由很多部分,我们不希望有单独管理每一个。paper.js有一个很好的对象。组一组对象关联在一起,因此,我们可以操纵他们一次。

1 <FONT> <FONT>组=新集团(); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
2 group.addChild(底部); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
3 ()group.addChild干; </ FONT> </ FONT> <FONT> </ FONT>
4 <FONT> </ FONT> <FONT> <FONT>
5 组=组; </ FONT> </ FONT>

最后一步是打包成可重用的对象称为种子种子我们添加的所有代码,我们已经写的名字到一个新的功能的种子,并添加一个函数来创建初始变量。这个例子调用函数创建的,但你可以将其命名为任何你想要的。

1 <FONT> <FONT>种子(){</ FONT> </ FONT> <FONT> </ FONT>
2 <FONT> </ FONT> <FONT> <FONT>
3     创建功能(/ *点* / / *布尔* / shortStem){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
4     ... </ FONT> </ FONT>

Create 函数的种子,在指定的投篮点,和的shortStem的布尔告诉我们这是否是一个短期的干。稍晚些时候,我们将着眼于短期源于种子。

这些类型的功能构造函数在JavaScript 不工作,但在PaperScript支持。

1 <FONT> <FONT> VAR的种子,新种子()</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
2 seed.create(新点(100,100),假); </ FONT> </ FONT>

我们的种子会像这样,当我们提醒他们:

种子对象提请我们随机的蒲公英种子。现在,我们可以将它们添加到我们的花。

添加有点乱

种子会更好看,当我们的空间,他们围绕我们的蒲公英球圈感觉像一个种子的光环。灯泡是圆的,圆的是一个路径,所以我们可以得到路径上的每个点。

01 <FONT> <FONT>鳞茎=新Path.Circle(尖点,10); bulb.fillColor = '#567e37“ 的; </ FONT> </ FONT> <FONT> </ FONT>
02 <FONT> </ FONT> <FONT> <FONT>
03 角= 360 / bulb.length的; </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
04 VAR的种子= []; </ FONT> </ FONT> <FONT> </ FONT>
05 <FONT> </ FONT> <FONT> <FONT>
06 (我= 0;我<bulb.length;我+){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
07     VAR的种子,新种子()</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
08     的(bulb.getPointAt(我))seed.create; </ FONT> </ FONT> <FONT> </ FONT>
09 <FONT> </ FONT> <FONT> <FONT>
10     / /旋转每个种子,以便它指出,从灯泡</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
11     seed.rotate(*角); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
12     seeds.push(种子); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
13 } </ FONT> </ FONT>

这将使种子周围的灯泡圈,但在中间留下的空间。我们将添加一些更多的种子,以填补在中心。我们给中心种子短茎,使他们表现出缕缕比茎米色的白色。

1 <FONT> <FONT>(i = 0;我<18; +){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
2     VAR的种子,新种子()</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
3     点=新的点(toPoint.x +随机(-3,3),</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
4                           toPoint.y +随机(-3,3)); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
5     seed.create(new点(尖点),真实); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
6     seed.rotate(随机(0,360)); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
7     seeds.push(种子); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
8 } </ FONT> </ FONT>

在中间的种子将一串随机,使我们的蒲公英看起来很好凌乱。现在,我们可以使他们吹掉。

动画种子

风把复杂的图案种子,两个种子,将永远以同样的方式吹掉。我们要让他们看看真正的,所以我们需要多一点的随机性。

音响真正的风是过于复杂,所以我们使种子漂浮在一个随机前瞻性的模式。每个种子被分配一个随机点作为最终目的地的屏幕右侧​​:

1 <FONT> <FONT> DEST =新点(1800年,随机(-300,1100)); </ FONT> </ FONT>

rotateMove功能推朝其目标点,每个种子和旋转。我们可以与我们作为一个群体的种子对象,旋转和移动的一个功能。

01 <FONT> <FONT> 。rotateMove =功能(/ * INT * /角){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
02     这一点。group.position.x <850的&& 。group.position.y <650){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
03         载体= DEST -  这个group.position; </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
04         。group.position + =向量/ 150; </ FONT> </ FONT> <FONT> </ FONT>
05 <FONT> </ FONT> <FONT> <FONT>
06         角+ =角; </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
07         group.rotate(角); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
08     }否则{</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
09         这一点。isOffScreen = TRUE </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
10     } </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
11 } </ FONT> </ FONT>

此功能将移动种子,直到它关闭屏幕。为我们的动画的每一帧调用rotateMove会使种子浮在屏幕上。

paper.js给了我们一个简单的方法,使动画onFrame功能;我们实施onFrame,Paper.js它会调用我们的动画的每一帧。随着每一帧,我们遍历每一个种子,并在屏幕上移动。

1 <FONT> <FONT>函数onFrame(事件){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
2     (我= 0;我<seedCount; +){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
3         (种子[我]的。isOffscreen()){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
4             种子我rotateMove(随机(2,4)); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
5         } </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
6     } </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
7 } </ FONT> </ FONT>

种子幻灯片和旋转一点点接近目标点与动画的每一帧。所有的种子在同一地点开始和结束他们相距甚远,使他们出很好的空间,因为他们移动。

我们不希望所有的种子属于一次,所以我们将使用一个定时器,使他们渐行渐远。

1 <FONT> <FONT>函数开始(){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
2     ID =的的setInterval(函数(){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
3         seedCount + </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
4         如果(seedCount === seeds.length){</ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
5             clearInterval(ID); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
6         } </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
7     },1000); </ FONT> </ FONT> <FONT> </ FONT> <FONT> <FONT>
8 } </ FONT> </ FONT>

定时器等待一秒钟之前释放未来的种子,让我们的蒲公英一个很好floaty的感觉。

一些绿草如茵,蓝天画布作为我们的背景图像放入上下文这一切。现在我们有蒲公英在微风中漂浮的种子。-TVCD微播设计Flash

 

发表看法  

姓名 (必填)*

电子邮件 (不会被公开) (必填)*

网站

提交看法