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

Posted

技术标签:

【中文标题】无限循环中的可见性淡出和淡出【英文标题】:Visibility fadeout and fade in infinite loop 【发布时间】:2021-03-07 04:44:49 【问题描述】:

我有一些Grid,里面有一些元素,我想在一些boolproperty 的无限循环基础上添加一些淡入淡出效果和Visibility 属性。 这是我尝试过的:

<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

【问题讨论】:

您看不到您的Grid,因为您最初将Opacity 设置为0,将其设置为1 【参考方案1】:

你的风格有几个问题:

您看不到Grid,因为您将初始Opacity 设置为0。 您可以删除两个Setters,因为它们是默认值 使触发器依赖于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>

【讨论】:

以上是关于无限循环中的可见性淡出和淡出的主要内容,如果未能解决你的问题,请参考以下文章

动画迭代计数无限循环

动画图像时无限循环

java声音淡出

淡入/淡出声音

JFrame 和可见性:淡出和获取屏幕截图的问题

javascript 两个类之间的无限旋转木马具有淡入淡出效果