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

Question

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

Answer 1

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

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

Transitionals Project

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

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

Writing custom GPU-based Effects for 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.