文字书写动画如何制作，下面介绍一种设计方法。

 

T1-20 书写动画界面

    这不是Flash动画。这种动画的制作方法和Flash不一样，因为Expression Blend中没有橡皮擦工具，但同样可以实现，如T1-20。动画界面由1个背景图、2个静止卷轴、一只毛笔和1个Textblock（书法研究）组成。其中背景图和卷轴的设计已经在卷轴动画中涉及，这里不再重复。动画形成这样的效果：1支毛笔书写“书法研究”4个汉字，鼠标左键点击背景图的矩形退出动画程序。

1、窗口设计

新建项目，MainWindow的Window属性设置为：

“外观”栏目中，WindowStyle-None；AllowsTransparency选中。

“画笔”栏中“Background”和“BorderBrush”属性均设为“无画笔”。

以上设置后，窗口上方的控制条被取消，需要添加退出应用的事件。

“布局”栏目中，Height=600，Width=800。

“公共属性”栏目中，WindowStartupLocation-CenterScreen。

LayoutRoot属性设置为：

“画笔”栏目中，Background-无画笔。

2、动画实现方案

    Expression Blend的【工具】面板中目前没有提供橡皮擦工具，书写文字的动画就要另外想办法。下面我们以一个比较简单的汉字“大”说明书写过程动画的一种设计方法。

    这种设计方法的基本思路就是用无边框、和文字背景同色的若干块“矩形”覆盖文字笔画形状（需要时要旋转矩形），覆盖从文字的最后笔画形状开始，一直覆盖到该文字的起笔，下图是“大”子被矩形覆盖后的形状，为了说明覆盖情况，设置了矩形边框，实际设置动画时没有边框。

    每次覆盖必须选中窗口的根布局，这样覆盖后的矩形形成了这样的层次顺序：后覆盖的矩形处于前1个矩形的上层，起笔处于最上层，上层矩形的大小就不会有严格的尺寸限制（实际上只要覆盖了笔画形状，矩形大小没有严格限制，只要不影响上一笔画的显示即可，这给设计带来方便），矩形的X轴或Y轴的轴向一般沿笔画形状方向。

    这样1个文字会有很多矩形，覆盖完成后将这些矩形全部组合成1个组，为区分用被覆盖的字作为组名。

T1-21 矩形覆盖

    矩形覆盖和字体有直接关系，注意系统有无相应的字体资源。【属性】面板的“文本”栏中有字体的“嵌入”选择项，需要时可以选择。 

 

T1-22 文字被矩形覆盖后的对象和时间线面板

3、毛笔设计

    毛笔由笔杆、笔头和笔绳组成。笔杆是1个矩形，和卷轴的设计方法一样。笔头和笔绳用【工具】面板中的笔工具画出形状路径，笔头颜色采用渐变画笔，笔绳用纯色画笔。最后用Grid组成1组，命名为“毛笔”。

4、故事板设计

    建立1个故事板，从“书”字的起笔开始针对覆盖矩形设计动画，逐个进行，每个矩形使用X或Y轴变换压缩，以露出字的笔画形状，根据笔画长短选择关键帧之间的时间间隔，时间间隔的末尾设置对应矩形的“外观”属性中的“Visibility”为“Hidden”，依次逐一设计每个矩形直到“书”字的最后1笔的最后1个覆盖矩形。

然后选中“毛笔”，从“书”字的起笔设计“毛笔”的位移动画，最好用键盘中的箭头键移动“毛笔”，直到“书”字的最后1笔的最后1笔。注意“毛笔”的位置变化、沿笔形的时间变化。设计完成后在【对象和时间线】面板将“书”字“锁”定。每个字的设计方法是一样的，但要注意字与子之间的“毛笔”运动。

注意“毛笔”应放置在布局的最上层。

5、背景图矩形的鼠标左键单击事件：

鼠标左键单击背景图的矩形ExitRectangle将退出应用程序，代码是。

private void ExitRectangle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

        {

            Application.Current.Shutdown();

    }

    故事板动画对象涉及若干个矩形，故事板图形不方便展示，请读者参看《WPF和Silverlight项目设计实例》光盘中的实例，不再列出。动画设计完成。