尝试对 Path StrokeProperty 进行动画处理会抛出无效操作异常

Question

我有代码，当达到某个值时，我想将路径的描边闪烁为红色。当我尝试应用这样的动画时，它显示

"''System.Windows.Media.Animation.DoubleAnimation' animation object cannot be used to animate property 'Stroke' because it is of incompatible type 'System.Windows.Media.Brush'.'"

我也尝试过 ColorAnimation，但仍然出现类似的异常。

在xaml的ControlTemplate中我定义的Path如下：

<ControlTemplate x:Key="FlaskProgressBarTemplate" TargetType="{x:Type local:FlaskProgressBar}">
<Grid>
<Path x:Name="Outline"
      StrokeThickness="8"
      Stroke="Black">
          <Path.Data>
                <PathGeometry Figures="M 20,15 L 20,60 0,110 60,110 40,60 40,15 Z"/>
          </Path.Data>
  </Path>
</Grid>

在某些方法执行的后面代码中：

private Path _contentPath;
  public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            _contentPath = this.GetTemplateChild("Outline") as Path;

            SetValue(this, Value);
        }

     private static void SetValue(FlaskProgressBar instance, double value)
            {
                if (instance._content != null)
                {
                    var rect = instance._content.Rect;
                    instance._content.Rect = new Rect(rect.X, rect.Height - value, rect.Width, rect.Height);
                    if (value == 100)
                    {
                        AnimateBorder(instance); //Error in this method.
                    }
                }
            }
    
      private static void AnimateBorder(FlaskProgressBar instance)
            {
                var path = instance._contentPath;
                if (path != null)
                {
                    path.Stroke = new SolidColorBrush(Colors.Red);
                    var switchOnAnimation = new DoubleAnimation
                    {
                        To = 1,
                        Duration = TimeSpan.Zero,
                        BeginTime = TimeSpan.FromSeconds(0.5)
                    };
    
                    var blinkStoryboard = new Storyboard
                    {
                        Duration = TimeSpan.FromSeconds(1),
                        RepeatBehavior = RepeatBehavior.Forever
                    };
                    Storyboard.SetTarget(switchOnAnimation, path);
                    Storyboard.SetTargetProperty(switchOnAnimation, new PropertyPath(Path.StrokeProperty));
                    blinkStoryboard.Children.Add(switchOnAnimation);
    
                    path.BeginStoryboard(blinkStoryboard); //I get an exception on this line.
                }
            }

Answer 1

您可以通过动画画笔的

Opacity

属性（其类型为 Double）而不是画笔本身来实现闪烁效果。

这是我的 BlinkingBorder 类中的样式，在最近的博客文章中出现。

<Style TargetType="{x:Type vctrl:perBlinkingBorder}">
    <Style.Triggers>
        <Trigger Property="IsBlinking" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard TargetProperty="(BlinkingBorderBrush).Opacity">
                        <DoubleAnimation
                            AutoReverse="True"
                            RepeatBehavior="Forever"
                            From="1"
                            To="0"
                            Duration="0:0:0.5">
                            <DoubleAnimation.EasingFunction>
                                <SineEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>