论文部分内容阅读
摘要：在用Expression Blend 4制作正弦函数绘图过程动画的过程中，作者试图利用路径动画来实现，但是，Blend 4制作Silverlight应用程序时，没有直接的路径动画。文章阐述通过布局路径及故事板(storyboard)实现用路径动画绘制正弦曲线的过程。
关键词：正弦函数；Silverlight＆Blend；布局路径；路径动画
中图分类号：G434 文献标识码：A 文章编号：1673-8454(2012)04-0068-02
笔者在制作正弦函数绘图过程动画时，为了实现“用笔画线，线随笔出”的效果，想到了Plash的路径动画。但是，Blend 4没有提供直接的路径动画，手上教材中连路径动画的概念都没有，网上偶有提及，但是或者不全，或者讲得太复杂，甚至用到大篇的代码，与Flash的路径动画相去甚远。笔者综合网上信息，进行多次试验，终于发现Blend 4路径动画的实现并不复杂，由此做出的正弦函数绘图过程动画效果并不输于Flash。制作过程的关键步骤及其要点如下：
一、描点
如图1所示，通过旋转半径确定角度、生成正弦线、平移正弦线到展现点，实现描点动画。整个过程一个动画，命名为sb01。动画只用到普通的关键帧动画及线性插值动画，这里不予细说。
三、動画连线
1 绘制路径
用铅笔工具，沿着前面绘的点画出正弦线。开始画出的曲线一般不会很光滑，可用路径选择工具进行调节。可以用笔工具对路径上的节点进行增减。
曲线绘制好后，复制一份。一个命名为path01，另一个命名为path02。
2 创建布局路径
选择path02，点鼠标右键，在弹出的菜单中选“路径”一“创建布局路径”，于是，path02的上面自动生成一个“PathLlstBox”，将pen-cil01拖到PathListBox下面，设计视图中，铅笔图片也就绑定到了路径path02上，
3 创建动画
新建故事板，命名为sb02。选中PathListBox，属性窗口中，展开布局路径项，布局路径下的Lav-outPath属性有如下选项：
Distribution(排列方式)：Even(排满)、Padded(间隔)；
CaoaeiW(容量)：放置控件的数量。如果设为1，则该路径上只能放一个控制项；
Padding(间隔距离)：Distribu-tion设为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属性，即可实现路径动画，这是本制作的关键：图像画刷给非专业美工人员处理图片提供了方便，常使制作锦上添花：结合关键帧动画，可以使动画过程得到准确控制。
关键词：正弦函数；Silverlight＆Blend；布局路径；路径动画
中图分类号：G434 文献标识码：A 文章编号：1673-8454(2012)04-0068-02
笔者在制作正弦函数绘图过程动画时，为了实现“用笔画线，线随笔出”的效果，想到了Plash的路径动画。但是，Blend 4没有提供直接的路径动画，手上教材中连路径动画的概念都没有，网上偶有提及，但是或者不全，或者讲得太复杂，甚至用到大篇的代码，与Flash的路径动画相去甚远。笔者综合网上信息，进行多次试验，终于发现Blend 4路径动画的实现并不复杂，由此做出的正弦函数绘图过程动画效果并不输于Flash。制作过程的关键步骤及其要点如下：
一、描点
如图1所示，通过旋转半径确定角度、生成正弦线、平移正弦线到展现点，实现描点动画。整个过程一个动画，命名为sb01。动画只用到普通的关键帧动画及线性插值动画，这里不予细说。
三、動画连线
1 绘制路径
用铅笔工具，沿着前面绘的点画出正弦线。开始画出的曲线一般不会很光滑，可用路径选择工具进行调节。可以用笔工具对路径上的节点进行增减。
曲线绘制好后，复制一份。一个命名为path01，另一个命名为path02。
2 创建布局路径
选择path02，点鼠标右键，在弹出的菜单中选“路径”一“创建布局路径”，于是，path02的上面自动生成一个“PathLlstBox”，将pen-cil01拖到PathListBox下面，设计视图中，铅笔图片也就绑定到了路径path02上，
3 创建动画
新建故事板，命名为sb02。选中PathListBox，属性窗口中，展开布局路径项，布局路径下的Lav-outPath属性有如下选项：
Distribution(排列方式)：Even(排满)、Padded(间隔)；
CaoaeiW(容量)：放置控件的数量。如果设为1，则该路径上只能放一个控制项；
Padding(间隔距离)：Distribu-tion设为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属性，即可实现路径动画，这是本制作的关键：图像画刷给非专业美工人员处理图片提供了方便，常使制作锦上添花：结合关键帧动画，可以使动画过程得到准确控制。