添加ScaleTransform打破WPF动画

我使用浏览器样式的界面进行动画制作，左侧的Navigator窗格和右侧的Workspace。导航器显示注释列表或日历 - 都是用户控件。在两个视图之间切换应用程序功能区上的按钮切换。我正在使用从旧UserControl解散到新的动画。添加ScaleTransform打破WPF动画

动画标记非常简单，并在本文底部完整地转载。我首先声明用户控件，首先声明日历，然后声明NoteList，以便NoteList覆盖并隐藏日历。通过淡出注释列表 - 将其不透明属性从1变为0，我将其从NoteList中解散到日历，并且通过将注释列表淡入其中 - 将相同的属性从0重新设置为1：

从NoteList溶解到日历：

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" />

溶解从日历NoteList：

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" />

动画运行正常，但我发现，设置不透明度为0简单地做笔记一览控制透明 - 它仍然覆盖日历控件，这意味着我无法点击日历。所以，我在每个故事板中添加了一个ScaleTransform，以便在未显示时清除Note List。

在从NoteList到日历中溶解，我ScaleTransform笔记一览为0后我淡出出来，以0：

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" /> 
<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="0" Duration="0:0:0" />

上的日历到NoteList一个解散，我ScaleTransform的注意事项清单1之前，我褪去它以1：

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0" /> 
<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" />

这里是我的问题：当我加入了ScaleTransform，它脱离了NoteList到日历中溶解 - 笔记一览的不透明度马上就到0 ，而不是超过预期的0.5秒。但是从日历中解散到备注列表仍然正常工作 - 备注列表的不透明度在预期的0.5秒内从0到1动画。

我通过评论ScaleTransform声明来测试问题，并且动画再次运行正常。取消对ScaleTransforms的注释，并且从备注列表转到日历时动画再次被中断。

任何人都可以提出为什么添加ScaleTransform会打破此动画，并在只有一个方向？谢谢你的帮助！

这里是全动画标记：

<ribbon:RibbonToggleButton x:Name="NoteListViewButton" LargeImageSource="Images/ListViewLarge.png" SmallImageSource="Images/ListViewSmall.png" Label="Note List" Click="OnViewButtonClick"> 
    <ribbon:RibbonToggleButton.Triggers> 
     <EventTrigger RoutedEvent="ribbon:RibbonToggleButton.Checked"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0" /> 
         <DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </ribbon:RibbonToggleButton.Triggers> 
</ribbon:RibbonToggleButton> 

<ribbon:RibbonToggleButton x:Name="CalendarViewButton" LargeImageSource="Images/CalendarViewLarge.png" SmallImageSource="Images/CalendarViewSmall.png" Label="Calendar" Click="OnViewButtonClick"> 
    <ribbon:RibbonToggleButton.Triggers> 
     <EventTrigger RoutedEvent="ribbon:RibbonToggleButton.Checked"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" /> 
         <DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="0" Duration="0:0:0" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </ribbon:RibbonToggleButton.Triggers> 
</ribbon:RibbonToggleButton

来源

2010-08-16 David Veeneman

我找到了我的答案。 Storyboard同时执行所有动画，所以在从NoteList解散为Calendar的情况下，在Opacity动画有机会运行之前，ScaleTransform被设置为0。

解决的办法是将ScaleTransform中的BeginTime属性设置为从NoteList中溶解到Calendar，以便让不透明度动画运行时间。修改后，如下所示：

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" /> 
<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="0" Duration="0:0:0" BeginTime="0:0:0.5" />

请注意在第二次动画声明结束时将BeginTime属性设置为“0：0：0.5”。就此而言，动画效果很好！

来源

2010-08-16 21:07:25

也许你可以通过使用StoryBoard.Completed事件克服与ScaleTransform的问题和设置的的Visibility无效控制分别为HiddenCollapsed（如果有适当的属性）。

见http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.completed.aspx

关于你的回答：您是否尝试过的Storyboard.Duration属性设置到0.5秒？

来源

2010-08-16 20:58:03 Andreas

是的，这可能工作，但它看起来像它需要一个事件处理程序。我解决了BeginTime属性以保持ScaleTransform，直到不透明度动画完成。 – 2010-08-16 21:09:59

添加ScaleTransform打破WPF动画

回答

相关问题