Silverlight 教程
原文：http://silverlight.jc.jishu.me/meigong_sl/donghua.htm 本文是接着《元件、场景、组实现》的创建的角色，接着实现的动画。 Silverlight到今才发展了两个版本，在同行业与Flash相比肯定有很多不及之处。新的技术是否有新前景呢？ 动画在Expression中的支持是很灵活的，对资源的管理也透明，和Flash有着得大的改变。下面和您一起探讨常用的几种动画类型，在Expression Blend中的实现。 6.1. 逐帧动画 Expression blend2 sp1版本中有对Silverlight 2的动画设计方面完善了很多，但还有很多不完美的地方。在时间轴中无法对控件的Visibility可见/隐藏属性设置（在旭找到其它方法可以时，将会改变这里的错误）。所以这时使用Opacity（透明度）设为0%方法，达到显示/隐藏控件的目的^^下面进入正式操作。 1、打开“项目”窗口，双击打开“sanmao.xaml“文件。 2、单击角色，设为选中状态，选择菜单“对象 > 取消分组”命令，然后我们可以为其重新分组。如图3.34所示。
图3.343、单击空白位置，取消选择。使用鼠标在空白的无对象的地方开始点下鼠标，并拖动选中左边的第一帧的角色后放开，如图3.35中所示。
图3.354、选中后按Ctrl+G，或在菜单中选择“对象 > 组合 > Grid ”命令。让第一个角色为一组，并且同样的方法选中第二个角色。并按Ctrl+G进行分组。选中第一个角色，打开属性面板，名称设为“boy1”，选中第二个角色，属性中名称设为“boy2”。然后使用拖动第二个角色到第一个角色并上与第一个角色重叠，如图3.36所示。
图3.36这里我们要实现这两个角色循环出现，一种走路的效果。 6、 把两个图形移动到左上角，点击左上外的图标将Grid的编辑模式设为“网格处于‘
画布’布局模式”，然后在“对象和时间轴”窗口中，选中“UserControl”顶层，并将设计画布中的大小设为和两个角色大小一致。如图6.1.61。
图6.1.617、 打开“交互”窗口，在对象时间轴的面板中，选中boy2层，如图6.1.61中所示：
图6.1.618、 打开“属性”窗口，把外观面板中的“Opacity（透明度）”设为0。 9、 现在开始创建动画，打开交互窗口中“对象和时间线”面板中单击
图标，打开“创建Storyboard资源”，如图6.2.62图中所示。
图6.2.6210、 确定后，进入了run的动画编辑界面。拖动黄色的动画时间位置针可控制动画的间隔时间长度。如图6.2.91。
图6.2.9111、 把时间移动到“0:00:300”的位置，如图6.2.101所示。
图6.2.10112、 在“对象和时间线”窗口中选择boy1层，在“属性”窗口中设Opacity为0%。再选中把boy2层，在“属性”窗口中设Opacity为100%。 13、 再把时间移动“0:00:500”位置，在“对象和时间线”中选中boy2层，在“属性”面板中的Opacity设为0%。并选中boy1层，在“属性”窗口中的Opacity设为100%，如图6.1.131。
图6.1.13114、 在动画单击选择中选中“run”，如图6.3.131。
图6.2.131在“属性”窗口中，把RepeatBehavior属性设为“Forever”。使动画为重复播放。 提示：现在您可以在“对象和时间线”窗口中，单击
按钮查看一下效果吧^^ 15、 在“对象和时间线”窗口中选择“UserControl”顶层，打开属性窗口，点击事件图标如图6.2.131所示。
图6.2.13116、 切换到了事件列表中后，在Loaded输入框中输入“Starting”（可任意），键入回车，程序转入Visual Studio 2008程序代码设计界面。在自动生成的代码中插入代码： public sanmao() { // 需要初始化变量 InitializeComponent(); } private void starting(object sender, RoutedEventArgs e) { run.Begin(); //要插入此段代码 } 17、保存并关闭Visual Studio 2008，回到Expression Blend中。 6.2. 移动动画 继续上面的操作，选择文件菜单：“文件 > 保存”命令，关闭sanmao.xaml文档。并打开page.xaml文档。 这时可能在page.xaml里面显示可能不正常，腿和手的显示的位置错了，哪是因为大小与元件内的大小不同。点击选择元件，然后选择菜单：“编辑 > 删除”命令删除，双击工具框中的“sanmao”重新添加到画布中，如图6.21所示。
图6.21提示：如果工具框中没有“sanmao”元件，可以点击
图标打开资源库的“自定义控件”选项卡中找到，列表是选择“sanmao”就会添加的工具框中。 在“交互”窗口中找到“对象和时间轴”面板，单击“sanmao”层右边的
眼图标，让设计中的角色暂时就隐藏。
图6.22在板中使用“
笔”工具画出如图6.22所示的路径。 在“交互”窗口的“对象和时间轴”面板中单击“sanmao”层中的
图标，让“sanmao”层显示出来，如图6.23所示。
图6.23并单击“sanmao”层选中角色，选择菜单：“对象 > 顺序 > 上移一层”命令。 然后打开“属性”窗口，找到“转换”面板，然后点击“缩放”项项卡，打开缩放控制界面。如图6.24中所示，并把X和Y的值进行设定，使画面中的大小适合路径中的大小。当然这里还有“倾斜、旋转、移位…”操作，可以灵活的试试。
图6.24在“工具框”中选择
选择工具，单击选中添加到场景中的元件，并拖动到右上角边的位置。如图6.25所示。
图.6256.3. 颜色动画 6.4. 路径动画 6.5. 遮罩动画制作 待续。。。