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

待续 … …