Добавление ScaleTransform с нарушением WPF-анимации

Question

Я анимирую интерфейс в стиле Проводника, с панелью Навигатора слева и Рабочей областью справа.В навигаторе отображается список заметок или календарь - оба являются пользовательскими элементами управления.Кнопки переключения на ленте приложения переключаются между двумя представлениями.Я оживляю изменение с распадом старого UserControl на новый.

Разметка анимации довольно проста и полностью воспроизведена внизу этого поста.Я объявляю оба пользовательских элемента управления, сначала «Календарь», а затем «Список заметок», чтобы «Список заметок» покрывал и скрывал Календарь.Я растворяюсь из Списка заметок в Календаре, затухая в Списке заметок - анимируя его свойство Opacity от 1 до 0, и растворяю другой способ, возвращая обратно в Список заметок - анимирую то же свойство обратно от 0 до 1:

Растворение из NoteList в календарь:

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

Растворение из Calendar в NoteList:

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

Анимация работает нормально, но я обнаружил, что при установке непрозрачности равной 0просто сделал элемент управления «Список заметок» прозрачным - он по-прежнему покрывал элемент управления «Календарь», что означало, что я не могу нажать на «Календарь».Итак, я добавил 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" />

При переходе из календаря к списку заметок я масштабирую, чтобы преобразовать список заметок в 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, он прервал растворение из Списка заметок в Календаре - непрозрачность в Списке заметок сразу стала равной 0, вместо ожидаемых 0,5 секунды.Но растворение обратно из календаря в список заметок по-прежнему работает нормально - непрозрачность списка заметок анимируется от 0 до 1 в течение ожидаемых 0,5 секунды.

Я проверил проблему, закомментировав объявления 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

Я нашел свой ответ.Storyboard выполняет все анимации одновременно, поэтому в случае слияния из NoteList в Calendar значение ScaleTransform было установлено равным 0, прежде чем анимация непрозрачности когда-либо получала возможность запускаться.

Решение состоит в том, чтобы установитьСвойство BeginTime в ScaleTransform для растворения из NoteList в календарь, чтобы дать время анимации непрозрачности для запуска.В измененном виде это выглядит так:

<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

Возможно, вы сможете преодолеть проблемы с ScaleTransform с помощью события StoryBoard.Completed и установить для Visibility неактивного элемента управления значение Hidden соответственно Collapsed (при наличии соответствующего свойства).

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

Относительно вашего ответа: Вы пытались установить свойство Storyboard.Duration равным 0,5 секунды?