添加ScaleTransform破坏WPF动画

Question

我正在制作资源管理器风格的界面动画，左侧是导航器窗格，右侧是工作区。导航器显示备注列表或日历--两者都是UserControls。应用程序功能区上的按钮在两个视图之间切换。我用动画的变化从旧的UserControl融合到新的。

动画标记非常简单，在这篇文章的底部完整地转载了它。我声明了两个用户控件，首先是Calendar，然后是NoteList，这样NoteList就可以覆盖和隐藏Calendar。我通过淡出备注列表从NoteList中融合到日历中--将其Opacity属性从1动画化为0，然后通过将备注列表淡入淡入，以另一种方式融合它--将相同的属性从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只会使Note List控件变得透明--它仍然覆盖了Calendar控件，这意味着我无法单击Calendar。因此，我在每个故事板上添加了一个ScaleTransform，以便在注释列表不显示时将其去掉。

在从NoteList到日历的融合中，我在将备注列表淡出为0之后将其ScaleTransform为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

Answer 1

我找到了答案。故事板同时执行所有动画，因此在从NoteList融合到日历的情况下，在不透明度动画有机会运行之前，ScaleTransform已设置为0。

解决方案是在ScaleTransform中为从NoteList到日历的融合设置BeginTime属性，以便为不透明动画提供运行时间。经过修改后，它看起来像这样：

<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“。有了这些，动画就能工作了！

Answer 2

也许您可以通过使用StoryBoard.Completed事件来克服ScaleTransform的问题，并将非活动控件的Visibility分别设置为Hidden和Collapsed (如果有合适的属性)。

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

关于您的回答:您是否尝试过将Storyboard.Duration属性设置为0.5秒？