用Blend 4制作正弦函数绘图过程动画的关键步骤及其要点

杜卫杰，陈世华，艾训儒

（1.深圳市宝安区深圳东方英文书院，广东深圳518128；2.恩施自治州高级中学，湖北恩施445000；3.湖北民族学院，湖北恩施 445000）

用Blend 4制作正弦函数绘图过程动画的关键步骤及其要点

杜卫杰1，陈世华2，艾训儒3

（1.深圳市宝安区深圳东方英文书院，广东深圳518128；2.恩施自治州高级中学，湖北恩施445000；3.湖北民族学院，湖北恩施 445000）

在用Expression Blend 4制作正弦函数绘图过程动画的过程中，作者试图利用路径动画来实现，但是，Blend 4制作Silverlight应用程序时，没有直接的路径动画。文章阐述通过布局路径及故事板（Storyboard）实现用路径动画绘制正弦曲线的过程。

正弦函数；Silverlight&Blend；布局路径；路径动画

笔者在制作正弦函数绘图过程动画时，为了实现“用笔画线，线随笔出”的效果，想到了Flash的路径动画。但是，Blend 4没有提供直接的路径动画，手上教材中连路径动画的概念都没有，网上偶有提及，但是或者不全，或者讲得太复杂，甚至用到大篇的代码，与Flash的路径动画相去甚远。笔者综合网上信息，进行多次试验，终于发现Blend 4路径动画的实现并不复杂，由此做出的正弦函数绘图过程动画效果并不输于Flash。制作过程的关键步骤及其要点如下：

一、描点

如图1所示，通过旋转半径确定角度、生成正弦线、平移正弦线到展现点，实现描点动画。整个过程一个动画，命名为sb01。动画只用到普通的关键帧动画及线性插值动画，这里不予细说。

二、画线笔制作

动画过程中，设计用铅笔画线。由于美工欠缺，若直接在设计视图中绘制铅笔，绘出来太不专业；若用现存图片，背景又不好处理。因此可用图像画刷：先从网上下载一个铅笔图片， 再画一个五边形 （形状Shapes→Pentagon），用铅笔图片填充该五边形，可实现对铅笔图片的裁剪，效果见图2。将铅笔命名为pencil01。

三、动画连线

1.绘制路径

用铅笔工具，沿着前面绘的点画出正弦线。开始画出的曲线一般不会很光滑，可用路径选择工具进行调节。可以用笔工具对路径上的节点进行增减。

曲线绘制好后，复制一份。一个命名为path01，另一个命名为path02。

2.创建布局路径

选择path02，点鼠标右键，在弹出的菜单中选“路径”→ “创建布局路径”，于是，path02的上面自动生成一个“PathListBox”，将 pencil01拖到PathListBox下面，设计视图中，铅笔图片也就绑定到了路径path02上。

3.创建动画

新建故事板，命名为sb02。选中PathListBox，属性窗口中，展开布局路径项，布局路径下的Lay-outPath属性有如下选项：

Distribution（排列方式）：Even（排满）、Padded（间隔）；

Capacity（容量）：放置控件的数量。如果设为1，则该路径上只能放一个控制项；

Padding（间隔距离）：Distribution设为Padded才有效；

Orientation（方向）：None（无）、OrientToPath（顺着路径），设为None时，运动对象不倾斜，设为OrientToPath时，运动对象沿路径方向倾斜；

Start （开始位置）：运动对象在路径上的开始位置，这是对象运动的关键项；

Span（宽度）：用于调整路径的宽度。

开始时刻插入关键帧，Start值设为0%，最后位置插入关键帧，Start值设为100%。点播放，铅笔动了起来。但是此时，铅笔的位置不对。笔的中心点在路径上，而不是笔尖在路径上。

将path02的透明度设为0，并将path02向上移动，使笔尖刚好指在path01的开始位置。这样，铅笔虽然在沿着path02移动，但看起来是笔尖沿path01在移动。

再添加一个矩形，不要边线，用白色填充，用来遮住铅笔未到部分。

继续编辑sb02，第一帧处矩形全部遮住path01，最后一帧矩形刚好到path01结尾。由于铅笔走的是弯路，而矩形走的是直路，中间它们可能不同步，可以通过调节矩形动画的关键帧使它们同步，结果如图2所示。

结束语

用铅笔工具绘制对象的运动路径，创建布局路径得到Path-ListBox，将运动对象拖入到Path-ListBox下，再创建故事板，设置PathListBox的LayoutPath属性，即可实现路径动画，这是本制作的关键；图像画刷给非专业美工人员处理图片提供了方便，常使制作锦上添花；结合关键帧动画，可以使动画过程得到准确控制。

（编辑：王天鹏）

G434

A

1673-8454（2012）04-0068-02