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. 所有动画效果和事件都添加好了，可以看看效果：

待续 … …