WPF图片每隔0.5秒闪烁6秒后无法停止动画的问题求助

我尝试实现让Image控件每隔0.5秒闪烁一次、持续6秒的效果，但发现即使将Image的Style设为null，动画依然会继续运行。以下是我用到的Style和后台赋值代码：

原Style代码 #

<Style x:Key="imgBlink" TargetType="Image">
    <Style.Triggers>
        <Trigger Property="Opacity" Value="1">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard Name="blinkEffect" RepeatBehavior="1x">
                        <DoubleAnimation Storyboard.TargetProperty="(Image.Opacity)"  
                                         From="1" To="0" 
                                         Duration="0:0:0.5" 
                                         AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

原后台赋值代码 #

private void BtnLocateDevice_Click(object sender, RoutedEventArgs e)
{
   try
   {
      if (this.ImageElementReference != null)
      {
           var sb = Application.Current.FindResource("imgBlink") as Style;
           if (sb != null) 
           {
                this.ImageElementReference.Style = sb;
           }
      }
    }
    catch (Exception ex)
    {
            writeDebugLog(ex.Message);
            writeDebugLog(ex.StackTrace);
    }
}

问题原因 #

1. WPF中通过Trigger启动的Storyboard会直接作用于控件属性，即使移除Style，已启动的动画不会自动停止，因为动画与Style的关联已断开。
2. 原Style的RepeatBehavior="1x"搭配AutoReverse="True"，仅会完成一次“显示→隐藏→显示”循环（时长1秒），无法达到6秒的持续闪烁需求。

解决方案 #

方案1：手动停止动画后再移除Style #

修改Style（调整循环次数并命名Storyboard）

<Style x:Key="imgBlink" TargetType="Image">
    <Style.Triggers>
        <Trigger Property="Opacity" Value="1">
            <Trigger.EnterActions>
                <!-- 给BeginStoryboard命名，方便后续引用停止 -->
                <BeginStoryboard Name="BlinkStoryboard">
                    <!-- 6次循环，每次循环1秒，总时长6秒 -->
                    <Storyboard RepeatBehavior="6x">
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                         From="1" To="0" 
                                         Duration="0:0:0.5" 
                                         AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

修改后台代码（添加停止动画逻辑）

// 停止动画的通用方法
private void StopBlinkAnimation(Image image)
{
    // 直接清除Opacity属性的动画，更可靠
    image.BeginAnimation(Image.OpacityProperty, null);
    // 恢复控件透明度为初始状态
    image.Opacity = 1;
}

// 点击事件调整
private void BtnLocateDevice_Click(object sender, RoutedEventArgs e)
{
    try
    {
        if (this.ImageElementReference != null)
        {
            // 先停止之前的动画（如果存在）
            StopBlinkAnimation(this.ImageElementReference);
            
            var sb = Application.Current.FindResource("imgBlink") as Style;
            if (sb != null) 
            {
                this.ImageElementReference.Style = sb;
            }
        }
    }
    catch (Exception ex)
    {
        writeDebugLog(ex.Message);
        writeDebugLog(ex.StackTrace);
    }
}

// 需要停止动画并移除Style时调用此方法
private void StopBlinkAndClearStyle()
{
    if (ImageElementReference != null)
    {
        StopBlinkAnimation(ImageElementReference);
        ImageElementReference.Style = null;
    }
}

方案2：使用DataTrigger绑定开关属性（推荐） #

通过绑定布尔属性控制动画启停，更符合WPF数据驱动的设计思想。

1. 添加控制属性（后台或ViewModel）

private bool _isBlinking;
public bool IsBlinking
{
    get => _isBlinking;
    set
    {
        _isBlinking = value;
        // ViewModel需实现INotifyPropertyChanged接口触发通知
        OnPropertyChanged(nameof(IsBlinking));
    }
}

// 窗口后台实现INotifyPropertyChanged示例
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

2. 修改Style为DataTrigger

<Style x:Key="imgBlink" TargetType="Image">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsBlinking}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard Name="BlinkStoryboard">
                    <Storyboard RepeatBehavior="6x" Completed="BlinkStoryboard_Completed">
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                         From="1" To="0" 
                                         Duration="0:0:0.5" 
                                         AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <!-- 属性切换为False时自动停止动画 -->
            <DataTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="BlinkStoryboard"/>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

3. 后台控制逻辑

// 窗口初始化时设置DataContext
public YourWindow()
{
    InitializeComponent();
    DataContext = this;
}

private void BtnLocateDevice_Click(object sender, RoutedEventArgs e)
{
    try
    {
        if (this.ImageElementReference != null)
        {
            IsBlinking = true;
            // 6秒后自动停止动画
            Task.Delay(TimeSpan.FromSeconds(6)).ContinueWith(t => 
            {
                Dispatcher.Invoke(() => IsBlinking = false);
            });
        }
    }
    catch (Exception ex)
    {
        writeDebugLog(ex.Message);
        writeDebugLog(ex.StackTrace);
    }
}

// 动画完成后自动重置开关属性
private void BlinkStoryboard_Completed(object sender, EventArgs e)
{
    IsBlinking = false;
}

内容的提问来源于stack exchange，提问作者Chanom First