Windows Store App 主题动画

时间:2022-02-11 19:33:12

Windows 8系统的动画库中包含了丰富的主题动画,在开发Windows应用商店应用时,使用主题动画编写较少的代码即可实现所期望的动画效果。下面介绍一些常用的主题动画,读者可以根据每种主题动画提供的动画效果,在应用程序中加入相应的主题动画。

q  FadeInThemeAnimation,代表预配置不透明度动画,用于设置控件在屏幕中的淡入效果。

q  FadeOutThemeAnimation,用于设置控件从界面中删除或隐藏时的淡出效果。

q  DropTargetItemThemeAnimation,应用到潜在的拖放目标元素的预配置动画。

q  PopInThemeAnimation,控件的弹入组件显示时应用在控件上的预配置动画,此动画结合了不透明度和转换。

q  PopOutThemeAnimation,控件的弹入组件关闭或删除时应用在控件上的预配置动画,此动画结合了不透明度和转换。

q  RepositionThemeAnimation,界面控件重新放置时使用的预配置动画。

q  PointerDownThemeAnimation,代表一个预配置动画,当用户单击元素时动画运行。

q  PointerUpThemeAnimation,在点击一个项目或元素后(指针不再悬停在上面)运行的用户操作预配置动画。

由于上述主题动画实现代码很类似,这里仅以FadeOutThemeAnimation动画为例,实现一个矩形淡出屏幕的动画效果。

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

<StackPanel>   

    <StackPanel.Resources>

        <Storyboard x:Name="storyboard">

            <FadeOutThemeAnimation  Storyboard.TargetName="MyRectangle"/>

        </Storyboard>

    </StackPanel.Resources>

</StackPanel>

<Rectangle PointerPressed="MyRectangle_PointerPressed" x:Name="MyRectangle"  Fill="Blue" Width="200" Height="300"/>

以上代码首先在StackPanel元素的资源字典StackPanel.Resources中添加一个作为动画资源的Storyboard元素,并命名为storyboard,以便在后台文件中调用storyboard对象的Begin方法启动动画。接着在Storyboard 元素中添加一个主题动画FadeOutThemeAnimation。

添加好了主题动画以后,下面继续在原有的Grid元素中添加一个Rectangle元素作为动画目标,同时指定此元素的的Fill属性值为蓝色(Blue),Width、Height属性值分别为200和300像素,并将其命名为MyRectangle。接着为Rectangle元素的PointerPressed事件定义名为MyRectangle_PointerPressed的事件处理方法,当触发此事件时将会启动主题动画。最后通过设置上面定义的Storyboard元素的TargetName属性值为MyRectangle,将主题动画效果定位到Rectangle元素上。

接下来打开FadeOutThemeAnimationPage.xaml.cs文件,为PointerPressed事件添加事件处理方法MyRectangle_PointerPressed,代码如下所示:

private void MyRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)

{

    storyboard.Begin();

}

上面的代码通过调用storyboard对象的Begin方法能够实现启动主题动画的操作。运行此页面,然后单击屏幕中的矩形,可以清晰的看到此矩形产生了淡出屏幕的动画效果。

主题动画的有些默认属性值是可以改变的,例如要减慢淡出屏幕的速度,可以通过增大FadeOutThemeAnimation对象的Duration属性值来实现。读者可以参照以上列举的示例,试着为控件添加不同的主题动画。