如何动画DropShadowEffect的不透明度？

Question

我有一个使用以下样式的边框的WPF项目。计划是当鼠标移过边界时使发光效果淡入，当它离开时淡出。

<Style x:Key="BorderGlow" TargetType="Border"> 
    <Style.Resources> 
     <Storyboard x:Key="GlowOn"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(DropShadowEffect.Opacity)"> 
       <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
     <Storyboard x:Key="GlowOff"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(DropShadowEffect.Opacity)"> 
       <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </Style.Resources> 

    <Setter Property="CornerRadius" Value="6,1,6,1" /> 
    <Setter Property="BorderBrush" Value="{StaticResource SelectedBorder}" /> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="Background" Value="{StaticResource DeselectedBackground}" /> 
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5" /> 
    <Setter Property="TextBlock.Foreground" Value="{StaticResource SelectedForeground}" /> 

    <Setter Property="RenderTransform"> 
     <Setter.Value> 
      <RotateTransform Angle="90"/> 
     </Setter.Value> 
    </Setter> 

    <Setter Property="Effect"> 
     <Setter.Value> 
      <DropShadowEffect ShadowDepth="0" BlurRadius="8" Color="#FFB0E9EF"/> 
     </Setter.Value> 
    </Setter> 

    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 

      <Trigger.EnterActions> 
       <BeginStoryboard Storyboard="{StaticResource GlowOn}"/> 
      </Trigger.EnterActions> 

      <Trigger.ExitActions> 
       <BeginStoryboard Storyboard="{StaticResource GlowOff}"/> 
      </Trigger.ExitActions> 

     </Trigger> 
    </Style.Triggers> 
</Style> 

问题是，没有任何反应！如果我在故事板TargetProperty中将“DropShadowEffect”更改为“UIElement”，则该动画将起作用，但这会淡化整个控件。

我该如何淡化DropShadowEffect？

Answer 1

有几点要注意的事项

1）你需要瞄准边境的实际财产 - 你实际上是努力的目标效果属性的值（DropShadowEffect），而不是物业本身。

2）您需要对PropertyPath的语法进行排序。

您Storyboard.Target属性更改为以下内容，你应该罚款：在注释中提到

Storyboard.TargetProperty="(Effect).Opacity" 

编辑工作代码：

<Border BorderThickness="10" Height="100" Width="100"> 
    <Border.BorderBrush> 
     <SolidColorBrush Color="Red"></SolidColorBrush> 
    </Border.BorderBrush> 
    <Border.Style> 
     <Style TargetType="Border"> 
      <Style.Resources> 
       <Storyboard x:Key="GlowOn"> 
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
          Storyboard.TargetProperty="(Effect).Opacity"> 
         <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/> 
        </DoubleAnimationUsingKeyFrames> 
       </Storyboard> 
       <Storyboard x:Key="GlowOff"> 
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
          Storyboard.TargetProperty="(Effect).Opacity"> 
         <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
        </DoubleAnimationUsingKeyFrames> 
       </Storyboard> 
      </Style.Resources> 

      <Setter Property="CornerRadius" Value="6,1,6,1" /> 
     <!--<Setter Property="BorderBrush" 
        Value="{StaticResource SelectedBorder}" />--> 
      <Setter Property="BorderThickness" Value="1" /> 
     <!--<Setter Property="Background" 
        Value="{StaticResource DeselectedBackground}" />--> 
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5" /> 
     <!--<Setter Property="TextBlock.Foreground" 
        Value="{StaticResource SelectedForeground}" />--> 

      <Setter Property="RenderTransform"> 
       <Setter.Value> 
        <RotateTransform Angle="90"/> 
       </Setter.Value> 
      </Setter> 

      <Setter Property="Effect"> 
       <Setter.Value> 
        <DropShadowEffect ShadowDepth="20" 
             BlurRadius="8" 
             Color="#FFB0E9EF"/> 
       </Setter.Value> 
      </Setter> 

      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 

        <Trigger.EnterActions> 
         <BeginStoryboard 
           Storyboard="{StaticResource GlowOn}"/> 
        </Trigger.EnterActions> 

        <Trigger.ExitActions> 
         <BeginStoryboard 
           Storyboard="{StaticResource GlowOff}"/> 
        </Trigger.ExitActions> 

       </Trigger> 
      </Style.Triggers> 

     </Style> 
    </Border.Style> 
</Border>