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

最新推荐文章于 2025-03-10 10:22:50 发布

weixin_33785108

最新推荐文章于 2025-03-10 10:22:50 发布

阅读量131

点赞数

本文介绍如何使用Storyboard和EventTrigger为UI元素添加动画效果，包括窗口图标闪动及平滑过渡等，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

dis ef1

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>