Windows Store App 过渡动画

Windows Store App 过渡动画

 

 

在开发Windows应用商店应用程序时，如果希望界面元素进入或者离开屏幕时显得自然和流畅，可以为其添加过渡动画。过渡动画能够及时地提示用户屏幕所发生的变化，不会让用户觉得元素的位置变化过于突然。下面通过一个示例介绍如何为界面中的文本块添加过渡动画。

在一个打开的Windows应用商店项目中新建一个空白页，并命名为TransitionAnimationPage，双击打开此页面的TransitionAnimationPage.xaml文件，在Grid元素中添加如下代码。

<TextBlock Text="过渡动画" FontSize="50">

     <TextBlock.Transitions>

         <TransitionCollection>

             <EntranceThemeTransition/>

         </TransitionCollection>

     </TextBlock.Transitions>

</TextBlock>

在上面的代码中，添加了一个用于实现过渡动画的文本块，通过Text属性将其本文内容设置为“过渡动画”，并使用FontSize属性设置字体的大小为50像素。接着在TextBlock.Transitions元素中添加一个TransitionCollection元素作为文本块的过渡动画集合，并在其中添加了一个EntranceThemeTransition动画，此动画可以使TextBlock文本块在进入屏幕时产生位置过渡的动画效果。

运行此页面，可以看到添加了过渡动画的文本块会在水平方向上从右向左划入屏幕。动画效果如图10-2所示。

图 10-2 过渡动画效果图1

从图10-2中可以看到，动画开始时，文本块会沿着箭头的指向滑入屏幕，经过短暂的时间后会停在屏幕中的某一位置，而具体停在什么位置可以根据文本块的Margin属性值来确定，在本示例中并没有设置文本块的Margin属性值，因此文本块会默认停在屏幕的左上角。除此之外，读者需要注意的是，如果为最外层的Grid元素添加过渡动画，那么其中的所有子元素都会有过渡动画效果，读者可以根据实际开发中具体情况选择为恰当的元素添加过渡动画。

前面介绍的EntranceThemeTransition动画对象中包含了可以控制动画效果的FromHorizontalOffset和FromVerticalOffset属性，通过指定这两个属性的值可以控制界面元素的起始位置相对于目标位置在水平和竖直方向上的偏移量，使添加过渡动画的界面元素以预想的轨迹进入屏幕。

下面再次回到之前添加的TransitionAnimationPage页面，双击打开TransitionAnimationPage.xaml文件，指定文本块在屏幕上的滑动距离，代码如下所示：

<TextBlock Text="过渡动画" FontSize="50">

     <TextBlock.Transitions>

         <TransitionCollection>

            <EntranceThemeTransition FromHorizontalOffset="500" FromVerticalOffset="500"/>

         </TransitionCollection>

     </TextBlock.Transitions>

</TextBlock>

以上代码在原来的基础上又将EntranceThemeTransition动画对象的FromHorizontalOffset和FromVerticalOffset属性值分别设置为500像素，以指定文本块在水平方向与竖直方向的滑动距离。

运行此页面，屏幕上产生的过渡动画效果如图10-3所示。

图10-3过渡动画效果图2

从图10-3中可以看到，动画开始时文本块会沿着箭头的指向滑入屏幕，这与前一个过渡动画示例相比，文本块的位置变化显得更加醒目。

至此已经介绍了如何为单一的TextBlock文本块添加过渡动画，除此之外，还可以为对象容器添加过渡动画，这样在对象容器中的所有子对象将会产生更加有趣的动画效果。下面通过一个示例讲解如何为对象容器添加过渡动画效果。

在一个打开的Windows应用商店项目中新建一个空白页，并命名为EntranceThemeTransitionPage，双击打开此页面的EntranceThemeTransitionPage.xaml文件，在原有的Grid元素中添加如下代码。

<ItemsControl>

    <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>

            <EntranceThemeTransitionFromHorizontalOffset="100" FromVerticalOffset="200"/>

        </TransitionCollection>

    </ItemsControl.ItemContainerTransitions>

    <ItemsControl.ItemsPanel>

        <ItemsPanelTemplate>

            <WrapGrid Height="300"/>

        </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="300"/>

        </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动画集合中同时添加多个动画。然而并不是所有的情形都适合使用过渡动画，如果过渡动画效果不能满足应用的需求，可以添加即将在下一节中介绍的演示图板动画。