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只会使“笔记列表”控件变得透明 - 它仍然覆盖了日历控件，这意味着我无法单击日历。因此，我在每个故事板中添加了一个ScaleTransform，以便在不显示时将Note List放在一边。

在从NoteList到日历的解散中，我将音符列表转换为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的溶解中，我将注释列表转换为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

＆GT;

Answer 1

也许您可以使用ScaleTransform事件克服StoryBoard.Completed的问题，并将非活动控件的Visibility分别设置为Hidden Collapsed（如果有适当的财产）。

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

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

Answer 2

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

解决方案是将ScaleTransform中的BeginTime属性设置为从NoteList到Calendar的Dissolve，以给出Opacity动画时间。修改后，它看起来像这样：

<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”。有了它，动画就可以了！

添加ScaleTransform打破WPF动画

2 个答案: