WP7-Expression Blend 为Banner Text控件创建动画效果

转自：http://www.devdiv.com/thread-36650-1-1.html

帧定义一个动画效果的开始点和结束点。在Expression Blend中，你通过创建一个storyboard，在storyboard中你能在Timeline

设置关键帧来表示属性的改变。例如，你能在第0秒设置关键帧来记录artboard的左边的方框的位置，然后再第一秒的位置设置关键
帧来表明artboard的右边的同一方框在现实效果，设置完后的动画效果是在一秒钟内，方框发生移动。当你在storyboard中运行时，
Expression Blend在设计的时间期限内改变动画的属性，并且可以看到你修改的效果，你能用这种方法，来使得你的控件更加吸引
人。

在这个例子里，你将在Expression Blend中创建一个storyboard，使得点击按钮后，在banner中的文字具有动画效果。

1. 打开上个例子中的工程，按上一个例子的方法，转到Expression Blend的项目下。然后将将active workspace转到
   animation workspace的窗口下，方法是：在Windows菜单中，选择Workspaces然后再选择Animation。
   注意这次转换时为了编辑timeline时，控件最大化，方便编辑。

      注意：需要将wordspace恢复到默认状态。在菜单中选择 Window | Reset Current Workspace

   2. 如果有必要，退出Button控件模板的范围。方法是：在Objects and Timeline面板上点击SCope Up按钮，然后递减FancyButton
      元素展示页面的树形结构。（FancyButton我没有找到在哪里）

      注意：当你编辑一个控件模板时，Object and Timeline面板仅仅展示模板的元素树。编辑其他的页面元素，你需要跳出当前的
      的范围。

   3. 现在，在Object and Timeline面板上，点击New创建一个storyboard。这是一个按钮图标以+标记，在面板的右上角。
      如下图所示：

      图20：在Animotion模式下的Objects and timeline面板
   4. 在Create Storyboard Resource对话框下，设置AnimateBanner的Name,点击Ok。如下图所示：

      图21：创建一个新的storyboard

   5. 为动画创建关键帧，第一，点击BannerTextBlock元素，即选中它。

   6. 然后，点击和托timeline playhead的当前位置到一秒钟的位置。如下图所示：

      图22：改变时间位置

      注意：playhead是那黄色的编辑，位于timeline的顶部。页面上元素的任何改变将在本地timeline playhead作为关键帧被记录。

   7. 在转到Properties面板，打开Transform目录，选择Scale transform。设定X的属性值为-1，。这个改变映射元素元素将在出现
      它的水平轴线上。( This transform mirrors the element along its horizontal axis. )

      图23：改变范围值，来反映text的改变

   8. 转到timeline面板上。
      注意它包换新的关键帧，用一个灰色的圆圈来标记。

      图24：创建一个新帧

   9. 现在改变timeline playhead到2秒的位置.

   10. 再次看Properties面板，打开Transform目录，选择Scale transform,改变X属性值为1，恢复元素到它的原始状态。
      注意一个秒关键帧出现在storyboard timeline里面。因为它发生了改变。

      图 25：Objects and Timeline展示插入关键帧

   11. 现在可以测试设计的动画效果。你需要增加在banner里面增加文字。方法是：点击AnimateBanner storyboard名字，
      关闭临时记录，这样就不增加文本到动画里面。

      图26：关闭记录模式
      注意：当你关闭记录，一些元素的改变将不被包含在动画中。

   12. 现在，右击BannerTextBlock控件，选择Edit Text。输入合适的文字，然后点击Enter按键。

   13. 点击timeline上的Play按钮来测试动画效果。注意文字的移动效果。在下面的不走中，你将用简单的函数来将动画表现的
      更加自然，并且演示怎么将动画效果放到工程中。

      图27：在designer中播放动画

   14. 选择第一个关键帧，方法是点击timeline上的灰色圆形图标。当你选择一个帧时，designer视图将展示UI元素的状态，在
      那例子中，banner text控件将翻转着出现。
      现在，在Properties面板上，在Easing目录下，去顶EasingFunction被选择，打开列表，展示一系列可用的函数，然后选择
      Cubic Out函数。

                                                               图28：将一个easing function插入两个关键帧之间
   15. 重复前面的步骤配置第二个关键帧的easing function。这次选择Cubic InOut函数使以低速率开始来改变Text的状态然后慢
      慢加速，最终在结束的帧尾降低速率。

           图29：选择Cubic InOut easing function

   16. 点击play来测试效果。注意banner开始有个高的速度旋转，然后在文字出现时，慢了下来，然后再加快，最后速度变慢，回到
      它的原始位置。

   17. 到此为止，为banner text创建了一个动画效果。但是它只是简单的存在的没有被用到的资源。为了将效果加入的工程中，需要
      通过代码事件来激活storyboard。为了让点击Click me，展示动画效果，需要执行以下方法：先打开Button的Click事件：

      1. 从activie workspace下转到Design workspace下，在菜单Windows下，选择Workspaces，然后在选择Design。
      2. 在Project 窗口下，点击箭头图标，这个图标在MainPage.xaml一边，展示它的代码。
      3. 双击MainPage.xaml.csd代开代码视图。
      插入使用动画的事件代码：如下所示：
      private void ClickMeButton_Click(object sender, RoutedEventArgse)
{
   BannerTextBlock.Text = MessageTextBox.Text;
   MessageTextBox.Text = String.Empty;
   this.AnimateBanner.Begin();
}

18. 在输入框中输入文字，然后点击Click Me,看看测试效果。


第一季的总结：在这一季中介绍了怎么使用Silverlight来为Windows Phone平台开发应用程序。通过完成这次练习，你熟悉了
创建和测试Windows Phone应用程序的工具。

在这个练习中，你用Visual Studio 2010 Express创建了一个新的Silverlight的Windows Phone应用程序，并且
免费的开发工具创建应用程序逻辑和UI。你学习了怎么将你的应用程序布局到模拟器中怎么Debugger你的应用程序
设置断点和单步调试，查看应用程序的变量值。最后你学习了在Express Blend中控制或改变UI的样式，并学会了
怎么创建动画效果的控件。