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

 

时间: 2024-10-27 07:45:58

Windows Store App 过渡动画的相关文章

Windows Store App 关键帧动画

关键帧动画和插值动画类似,同样可以根据目标属性值的变化产生相应的动画效果,不同的是,插值动画是在两个属性值之间进行渐变,而关键帧动画打破了仅通过两个属性值控制动画的局限性,它可以在任意多个属性值之间进行变化,这种变化方式可以是线性渐变也可以是瞬间突变.开发人员可以根据应用本身的需求,通过不同的关键帧设置动画元素的多个属性值,制作出更加复杂和绚丽的动画效果. 1.DoubleAnimationUsingKeyFrames关键帧动画 DoubleAnimationUsingKeyFrames关键帧动

Windows Store App 插值动画

插值动画支持DoubleAnimation.ColorAnimation和PointAnimation类型的动画.其中比较常用的是DoubleAnimation动画,它可以用来控制界面元素的Double类型属性值的动态变化,从而使元素在界面上呈现我们期望的动画效果.ColorAnimation和PointAnimation动画与DoubleAnimation动画类似,通过改变元素的Color类型和Point类型的属性值就可以实现这两种动画.下面首先介绍一下上述动画对象的一些共有属性. q  Du

Windows Store App 主题动画

Windows 8系统的动画库中包含了丰富的主题动画,在开发Windows应用商店应用时,使用主题动画编写较少的代码即可实现所期望的动画效果.下面介绍一些常用的主题动画,读者可以根据每种主题动画提供的动画效果,在应用程序中加入相应的主题动画. q  FadeInThemeAnimation,代表预配置不透明度动画,用于设置控件在屏幕中的淡入效果. q  FadeOutThemeAnimation,用于设置控件从界面中删除或隐藏时的淡出效果. q  DropTargetItemThemeAnima

C#学习(九)之Windows Store App &amp; WP 开发小记(一)

由于课程已经讲述完毕,所以本次学习记录就讨论记录一下我在Windows Store App & WP开发中遇到的一些问题与收获. 一.数据库(Sqlite)的使用 虽然资料很难找,但sqlite在这两个平台的使用还是很简单的. 首先是环境配置阶段: 1.工具->拓展与更新->联机,然后在右上搜索sqlite,之后下载安装下图两个打勾的拓展包,注意要重启VS方才生效. 2.项目->管理NuGet程序包->联机,搜索sqlite,安装下图打勾内容,如果项目多出下图两个文件即安装

Windows Store App 中使用Scrollviewer实现缩放功能

Windows Store App中可以直接使用Scrollviewer实现缩放功能,基本代码如下: <ScrollViewer Background="Yellow" HorizontalScrollBarVisibility="Visible" MaxZoomFactor="2" MinZoomFactor="0.5" VerticalScrollBarVisibility="Visible" Z

在桌面程序上(Winform or others)和Metro/Modern 程序(Windows store app)的交互(相互打开,配置读取等)

这个标题真是取得我都觉得蛋疼..微软改名狂魔搞得我都不知道要叫哪个好.. 这边记录一下自己的桌面程序跟windows store app交互的过程. 由于某些原因,微软的商店应用的安全沙箱导致很多事情无法做到,因此额外做了一个.NET桌面引擎来辅助,那么现在就需要让这两个不同环境的程序进行交互. 第一步:在桌面应用引擎中,唤醒商店应用. 根据MSDN解释,这边最简单的办法是使用协议(URI protocol)来解决. 1:打开程序的Package.appxmanifest,在声明中添加协议 名称

windows store app 读写图片

1 using System; 2 using System.Threading.Tasks; 3 using System.Runtime.InteropServices.WindowsRuntime; 4 using Windows.Graphics.Imaging; 5 using Windows.UI.Xaml.Media.Imaging; 6 using Windows.Storage; 7 using Windows.Storage.Pickers; 8 using Windows.

Windows Store App 中挂起时,程序奔溃的问题

昨天在开发windows phone 8.1程序时,发现程序在挂起的时候,会自动退出.通过调试发现错误信息是 System.Runtime.InteropServices.COMException (0x80004005): Unspecified error GetNavigationState doesn't support serialization of a parameter type which was passed to Frame.Navigate. at Windows.UI.

Get a developer license for windows store app(转)

Developer licenses are free, and you can get as many as you need so that all your test machines have one. If you get one or more developer licenses by using a Microsoft account, you must renew them every 30 days. If you get one or more developer lice