在现代的应用程序中,启动动画不仅能够提升用户体验,还能让应用看起来更加专业。本文将介绍如何在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();