Как я могу анимировать элемент управления, чтобы он разворачивался как пергаментный свиток в WPF?

Question

Кто-нибудь знает, как можно анимировать панель так, чтобы она, казалось, свернулась, как в пергаментном свитке старого стиля в WPF? Любая помощь будет принята с благодарностью.

Answer 1

Проблема в том, что это довольно сложная анимация, которая требует, чтобы одна часть элемента управления была инвертирована и сжата, а остальные элементы управления - нет. Так что на это нельзя ответить с помощью простой анимации масштаба или растяжки. Возможно, вы сможете использовать несколько анимаций в VisualBrushes, которые указывают на ваш пользовательский контроль, но усложнять их обмен во время выполнения.

Я бы порекомендовал вам проверить проект Transitionals на CodePlex:

Переходный проект

Transitionals включает в себя множество различных видов анимации, и одна из них может быть достаточно близка для вас. Если нет, вы можете посмотреть, как создаются переходы, и посмотреть, сможете ли вы настроить один для удовлетворения ваших потребностей.

Наконец, самый эффективный способ сделать это с помощью шейдеров. Шейдеры требуют некоторой математики, и написаны на HLSL (не на C #). Если вы заинтересованы в получении дополнительной информации, я настоятельно рекомендую вам ознакомиться со следующей статьей:

Написание пользовательских графических эффектов для WPF

Answer 2

Эффект, который вы ищете, действительно сложный. Но простой альтернативой будет анимация высоты / ширины.
В этом примере я анимирую панель стека, но вы можете заменить ее любым элементом управления.

<StackPanel Name="myStackPanel">
...
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="myStackPanel"
                                     Storyboard.TargetProperty="Height"
                                     To="100" Duration="0:0:1.0" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
</StackPanel>

Возможно, вам нужно добавить второй триггер, который оживляет до 5 (например, в MouseLeave). Анимация до 0, вероятно, заблокирует событие MouseEnter.