WPF编游戏系列 之六 动画效果（1）

       本篇主要针对界面进行动画效果处理。首先在打开或关闭界面时，使其产生动态效果而不是生硬的显示或消失（如下图）。其次在鼠标放到关闭窗口图标上时，使其出现闪动效果。下面将通过Storyboard和EventTrigger实现这些效果。


   


1. 先从简单的入手吧，为关闭图标增加闪动效果，首先要在ScrollViewer中添加一个关闭窗口图标。

... ...
<ScrollViewer Name="queryScrollViewer" ScrollViewer.VerticalScrollBarVisibility="Visible">
<StackPanel Orientation="Vertical">
<!-- 关闭窗口图标，尺寸设为20x20 -->
<Image Source="image/close.png" Name="closeImage" Height="20" Width="20"
Cursor="Hand" Margin="5" HorizontalAlignment="Right">
<Image.ToolTip>Close</Image.ToolTip>
</Image>
<Grid Name="queryGrid"></Grid>
</StackPanel>
</ScrollViewer>
... ...

 

2. 在Window.Resources中添加一个闪动效果，这个DoubleAnimation针对closeImage的Width进行缩小操作，并处于循环重复状态。这样可以保证鼠标在其上时，它总是闪动状态。

<Window.Resources>
<Storyboard x:Key="flashCloseImage">
<DoubleAnimation Storyboard.TargetName="closeImage"
Storyboard.TargetProperty="Width"
To="15" Duration="0:0:0.8"
RepeatBehavior="Forever"></DoubleAnimation>
</Storyboard>
... ...
</Window.Resources>

3. 效果添加好了，然后就要增加能使其能动起来的事件（EventTrigger），一个是鼠标放上（MouseEnter）开始闪动，另一个是鼠标离开（MouseLeave）停止。另外，由于这个图标也控制着窗口关闭效果，所以再为它加一个点击（MouseLeftButtonDown）事件（该事件效果后面会继续讲到）。

<Window.Triggers>
<!-- 开始闪动，而且要调用Window.Resources中的x:Key=”flashCloseImage” -->
<EventTrigger SourceName="closeImage" RoutedEvent="Image.MouseEnter">
<BeginStoryboard Name="closeImageBeginStoryboard"
Storyboard="{StaticResource flashCloseImage}">
</BeginStoryboard>
</EventTrigger>
<!-- 停止闪动，它的对象就是上面的closeImageBeginStoryboard -->
<EventTrigger SourceName="closeImage" RoutedEvent="Image.MouseLeave">
<StopStoryboard BeginStoryboardName="closeImageBeginStoryboard">
</StopStoryboard>
</EventTrigger>
<!-- 关闭窗口事件，稍后会讲 -->
<EventTrigger SourceName="closeImage" RoutedEvent="Image.MouseLeftButtonDown">
<BeginStoryboard Name="closeQueryCanvasStoryboard"
Storyboard="{StaticResource closeQueryCanvas}">
</BeginStoryboard>
</EventTrigger>
... ...
</Window.Triggers>

4. 所有动画效果和事件都添加好了，可以看看效果：



待续 … …