WPF应用启动动画的实现

在现代的应用程序中,启动动画不仅能够提升用户体验,还能让应用看起来更加专业。本文将介绍如何在WPF应用中实现一个启动时的动画效果,类似于登录账户时看到的简单动画文本加载。

步骤详解

首先,需要在WPF应用中添加一个新的窗口,可以称之为SplashWindow。为了使窗口无边框并且始终位于屏幕最前,需要在XAML中添加一些属性。

以下是设置窗口属性的XAML代码:

<Window x:Class="YourNamespace.SplashWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowStyle="None" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True"> </Grid> </Window>

默认情况下,新窗口的内容包含一个网格。可以通过添加线性渐变画刷来更改网格的背景。

以下是设置网格背景的XAML代码:

<Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFB9BBFF" Offset="0" /> <GradientStop Color="White" Offset="1" /> <GradientStop Color="White" Offset="0.72" /> </LinearGradientBrush> </Grid.Background>

为了实现淡入淡出的效果,需要创建一个第二网格来覆盖窗口的下半部分,并设置透明度遮罩。这样,当文本从窗口边缘移动到网格中心时,遮罩在第二网格的上下部分将是透明的。

以下是创建带有文本框的遮罩网格的XAML代码:

<Grid VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="150" Background="#00FFFFFF"> <Grid.OpacityMask> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#00000000" Offset="0.283" /> <GradientStop Color="#00000000" Offset="0.778" /> <GradientStop Color="White" Offset="0.491" /> </LinearGradientBrush> </Grid.OpacityMask> <TextBlock x:Name="txtLoading" TextAlignment="Left" FontSize="16" FontWeight="Normal" Foreground="#FF052045" Text="Beta 0.9" TextWrapping="Wrap" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="421"> <TextBlock.Effect> <DropShadowEffect BlurRadius="6" Color="#FF797979" Direction="201" Opacity="0.68" ShadowDepth="3" /> </TextBlock.Effect> </TextBlock> </Grid>

WPF中,可以通过Microsoft Blend添加新的动画故事板来定义关键帧,类似于Flash,但WPF会生成可读的动画格式。动画将在窗口资源标签中定义,并通过键来访问。

以下是定义动画的XAML代码:

<Window.Resources> <Storyboard x:Key="showStoryBoard"> <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="txtLoading"> <EasingThicknessKeyFrame KeyTime="0:0:0" Value="0,0,0,0" /> <EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,70" /> </ThicknessAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="HideStoryBoard"> <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="txtLoading"> <EasingThicknessKeyFrame KeyTime="0:0:0" Value="0,0,0,70" /> <EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,150" /> </ThicknessAnimationUsingKeyFrames> </Storyboard> </Window.Resources>

现在已经在XAML中创建了所需的内容。在代码后台,将创建一个线程来执行加载工作,并使文本动画化。首先,需要访问动画,定义两个Storyboard对象来访问窗口资源。

以下是访问窗口资源的C#代码:

Storyboard Showboard; Storyboard Hideboard; Showboard = this.Resources["showStoryBoard"] as Storyboard; Hideboard = this.Resources["HideStoryBoard"] as Storyboard;

接下来,需要创建两个函数——一个用于显示文本,一个用于隐藏文本:

private void showText(string txt) { txtLoading.Text = txt; BeginStoryboard(Showboard); } private void hideText() { BeginStoryboard(Hideboard); }

需要为每个函数创建委托,以便从加载线程调用:

private void load() { Thread.Sleep(1000); this.Dispatcher.Invoke(showDelegate, "first data to loading"); Thread.Sleep(2000); // do some loading work this.Dispatcher.Invoke(hideDelegate); Thread.Sleep(2000); this.Dispatcher.Invoke(showDelegate, "second data loading"); Thread.Sleep(2000); // do some loading work this.Dispatcher.Invoke(hideDelegate); Thread.Sleep(2000); this.Dispatcher.Invoke(showDelegate, "last data loading"); Thread.Sleep(2000); // do some loading work this.Dispatcher.Invoke(hideDelegate); // close the window Thread.Sleep(2000); this.Dispatcher.Invoke(DispatcherPriority.Normal, (Action)delegate() { Close(); }); }

有很多方法可以显示启动画面,但最简单的方法就是在主窗口的InitializeComponent之后添加以下代码:

new SplashWindow().ShowDialog();
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485