Windows Store App 过渡动画
在开发 Windows 应用商店应用程序时，如果希望界面元素进入或者离开屏幕时显得自然和流畅，可以为其添加过渡动画。过渡动画能够及时地提示用户屏幕所发生的变化，不会让用户觉得元素的位置变化过于突然。下面通过一个示例介绍如何为界面中的文本块添加过渡动画。
在一个打开的Windows 应用商店项目中新建一个空白页，并命名为 TransitionAnimationPage ，双击打开此页面的 TransitionAnimationPage.xaml 文件，在 Grid 元素中添加如下代码。
< Text Block Text =" 过 渡动画 " FontSize="50">
< Text Block.Transitions>
<TransitionCollection>
</TransitionCollection>
</ Text Block.Transitions>
</ Text Block>
在上面的代码中，添加了一个用于实现过渡动画的文本块，通过 Text 属性将其本文内容设置为“过渡动画”，并使用 FontSize 属性设置字体的大小为 50 像素。接着在 TextBlock.Transitions 元素中添加一个 TransitionCollection 元素作为文本块的过渡动画集合，并在其中添加了一个 EntranceThemeTransition 动画，此动画可以使 TextBlock 文本块在进入屏幕时产生位置过渡的动画效果。
运行此页面，可以看到添加了过渡动画的文本块会在水平方向上从右向左划入屏幕。动画效果如图 10-2 所示。
图 10-2 过渡动画效果图 1
从图 10-2 中可以看到，动画开始时，文本块会沿着箭头的指向滑入屏幕，经过短暂的时间后会停在屏幕中的某一位置，而具体停在什么位置可以根据文本块的 Margin 属性值来确定，在本示例中并没有设置文本块的 Margin 属性值，因此文本块会默认停在屏幕的左上角。除此之外，读者需要注意的是，如果为最外层的 Grid 元素添加过渡动画，那么其中的所有子元素都会有过渡动画效果，读者可以根据实际开发中具体情况选择为恰当的元素添加过渡动画。
前面介绍的 EntranceThemeTransition 动画对象中 包含了可以控制动画效果的 FromHorizontalOffset 和 FromVerticalOffset 属性，通过指定这两个属性的值可以控制界面元素的起始位置相对于目标位置在水平和竖直方向上的偏移量，使添加过渡动画的界面元素以预想的轨迹进入屏幕。
下面再次回到之前添加的 TransitionAnimationPage 页面，双击打开 TransitionAnimationPage.xaml 文件，指定文本块在屏幕上的滑动距离，代码如下所示：
< Text Block Text =" 过渡动画 " FontSize="50">
< Text Block.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="500" FromVerticalOffset="500"/>
</TransitionCollection>
</ Text Block.Transitions>
</ Text Block>
以上代码在原来的基础上又将 EntranceThemeTransition 动画对象的 FromHorizontalOffset 和 FromVerticalOffset 属性值分别设置为 500 像素，以指定文本块在水平方向与竖直方向的滑动距离。
运行此页面，屏幕上产生的过渡动画效果如图 10-3 所示。
图 10-3 过渡动画效果图 2
从图 10-3 中可以看到，动画开始时文本块会沿着箭头的指向滑入屏幕，这与前一个过渡动画示例相比，文本块的位置变化显得更加醒目。
至此已经介绍了如何为单一的 TextBlock 文本块添加过渡动画，除此之外，还可以为对象容器添加过渡动画，这样在对象容器中的所有子对象将会产生更加有趣的动画效果。下面通过一个示例讲解如何为对象容器添加过渡动画效果。
在一个打开的 Windows 应用商店项目中新建一个空白页，并命名为 EntranceThemeTransitionPage ，双击打开此页面的 EntranceThemeTransitionPage.xaml 文件，在原有的 Grid 元素中添加如下代码。
<ItemsControl.Items>
<Ellipse Fill= "Yellow" Width="100" Height="100" Margin="10"/>
<Ellipse Fill=" Yellow" Width="100" Height="100" Margin="10"/>
<Ellipse Fill=" Yellow" Width="100" Height="100" Margin="10"/>
<Ellipse Fill=" Yellow" Width="100" Height="100" Margin="10"/>
</ItemsControl.Items>
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
< EntranceThemeTransition FromHorizontalOffset="100" FromVerticalOffset="200"/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Height=" 3 00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
在上面的代码中，添加了一个 ItemsControl 元素，此元素作为对象容器，通过 ItemsControl.Items 元素向其中添加了 4 个宽和高分别为 100 像素的 Ellipse 元素。接着又在对象容器的 ItemsControl.ItemContainerTransitions 元素中添加一个 TransitionCollection 元素作为过渡动画集合，并在其中添加了一个 EntranceThemeTransition 动画对象，这样对象容器中的所有 Ellipse 元素就都可以产生过渡动画效果。又将 EntranceThemeTransition 动画对象的 FromHorizontalOffset 和 FromVerticalOffset 属性值分别设置为 100 和 200 像素，以调节对象容器中每个 Ellipse 元素的移动方向和距离。最后在 ItemsControl.ItemsPanel 元素中添加一个 ItemsPanelTemplate 元素，并在 ItemsPanelTemplate 元素中添加一个 WrapGrid 元素，通过此元素的 Height 属性设置容器对象中所有子对象在竖直方向上的布局范围为 300 像素。
运行此页面，可以看到对象容器中的椭圆会一个接一个的显示在屏幕中。动画效果如图 10-4 所示。
图 10-4 将过渡动画用于多个控件上的动画效果图
上面的示例只是实现了椭圆进入屏幕的开场动画效果，如果希望对象容器中的子对象位置发生更改时会产生重新调整位置的动画效果，需要将 RepositionThemeTransition 动画应用到包含多个子对象的对象容器中。下面的示例为对象容器中的每个矩形都添加了 RepositionThemeTransition 动画，若删除容器中的一个矩形，其他的矩形将重新调整到新的合理位置。
在一个打开的 Windows 应用商店项目中新建一个空白页，并命名为 RepositionThemeTransitionPage ，双击打开此页面的 RepositionThemeTransitionPage.xaml 文件，在 Grid 元素中添加如下代码。
<ItemsControl x:Name =" MyItemsControl ">
<ItemsControl.Items>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
</ItemsControl.Items>
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<! -- 如果没有这个部分，当有项被删除时不会有动画 效果 -->
<RepositionThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Height=" 3 00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button Content=" 删除矩形 " Click=" RemoveButton_Click " Margin="50,200,0,0"/>
上述代码的实现与之前讲解的示例代码类似，同样是需要添加一个对象容器，不同的是，本示例在后台代码中调用了 RemoveAt 方法对容器中的子对象执行了删除操作，因此将代表对象容器的 ItemsControl 元素命名为 MyItemsControl ，这样即可通过此名称调用 RemoveAt 方法来删除容器中的一个 Rectangle 元素。接着在 ItemsControl.Items 元素中添加 4 个宽高分别为 100 像素的 Rectangle 元素，并在此容器的 ItemsControl.ItemContainerTransitions 元素中添加一个 TransitionCollection 元素作为过渡动画集合，其中添加了一个 RepositionThemeTransition 动画对象，这样对象容器中的每个 Rectangle 元素都可以产生重新调整位置的过渡动画效果。然后在 ItemsControl.ItemsPanel 元素中添加一个 ItemsPanelTemplate 元素，在 ItemsPanelTemplate 元素中添加一个 WrapGrid 元素，通过此元素的 Height 属性设置容器对象中所有子对象在竖直方向的活动范围为 300 像素。最后在界面上添加一个按钮，并为其 Click 事件定义一个名为“ RemoveButton_Click ”的事件处理方法，以实现删除容器中矩形的操作。
接下来在后台代码中为“删除矩形”按钮添加事件处理方法 RemoveButton_Click ，当单击此按钮时，会删除对象容器中的一个矩形，代码如下所示：
private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
if ( MyItemsControl .Items.Count > 0)
{
MyItemsControl .Items.RemoveAt(0);
}
}
方法通过 if 语句判断 对象容器中是否存在矩形，如果存在，那么每单击一次按钮就会删除一个矩形，与此同时对象容器中剩余的矩形将会产生重新调整位置的动画效果。
除了上面介绍的过渡动画以外，还有其他类型的过渡动画。在进行界面元素的添加、删除和重新排列等操作时，也可以使用下面的过渡动画。
q AddDeleteThemeTransition ，在控件中的子对象或内容增减时提供过渡动画。
q ContentThemeTransition ， 在控件内容被更改的情况下提供过渡动画。
q ReorderThemeTransition ，在列表形式的控件中，每个列表项通过拖放改变其顺序后产生的过渡动画，不同的控件和主题可能具有不同的动画效果。
通过前面的示例，也许读者已经注意到了为控件添加过渡动画效果其实就是向过渡动画集合 TransitionCollection 中加入相应的动画，如果要实现多种过渡动画效果，可以向 TransitionCollection 动画集合中同时添加多个动画。然而并不是所有的情形都适合使用过渡动画，如果过渡动画效果不能满足应用的需求，可以添加即将在下一节中介绍的演示图板动画。
原文：http://www.cnblogs.com/finehappy/p/4218541.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！