可见性淡出和淡出无限循环

Question

我有一些 Grid 里面有一些元素，我想给它添加一些淡入淡出效果 Visibility 属性无限循环基于一些 bool property。这是我试过的：

<Grid.Style>
   <Style TargetType="FrameworkElement">
      <Setter Property="Visibility" Value="Visible"/>
      <Setter Property="Opacity" Value="0"/>
      <Style.Triggers>
         <Trigger Property="Visibility" Value="Collapsed">
            <Trigger.EnterActions>
               <BeginStoryboard>
                  <Storyboard>
                     <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                      From="0.0" 
                                      To="1.0"                                                                                    
                                      Duration="0:0:0.2"/>
                  </Storyboard>
               </BeginStoryboard>
            </Trigger.EnterActions>
         </Trigger>
      </Style.Triggers>
   </Style>
</Grid.Style>

目前我根本看不到我的Grid。

Answer 1

你的风格有几个问题：

您没有看到Grid，因为您将初始Opacity设置为0。
您可以删除两个 Setter，因为它们是默认值
让触发器依赖于Visibility是行不通的，因为当它设置为Collapsed时，Grid已经不可见了，所以连动画都不可见。
没有使 Grid 再次淡入的退出操作。

您可以通过公开用作动画触发器的属性（此处为 MyAnimationTriggerProperty）来解决问题。根据您的实际应用，这也可能是另一个控件的 IsChecked 状态。然后你可以添加一个ObjectAnimationUsingKeyFrames来设置动画结束时的Visibility。


<Style TargetType="FrameworkElement">
   <Style.Triggers>
      <DataTrigger Binding="{Binding MyAnimationTriggerProperty}" Value="False">
         <DataTrigger.EnterActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                               From="1.0" 
                                               To="0.0"                                                                                    
                                               Duration="0:0:0.2"/>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
                  </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </BeginStoryboard>
         </DataTrigger.EnterActions>
         <DataTrigger.ExitActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                               From="0.0" 
                                               To="1.0"                                                                                    
                                               Duration="0:0:0.2"/>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                  </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </BeginStoryboard>
         </DataTrigger.ExitActions>
      </DataTrigger>
   </Style.Triggers>
</Style>

可见性淡出和淡出无限循环

Visibility fadeout and fade in infinite loop

wpf

xaml

storyboard