WPFで羊皮紙スクロールのようにロールアウトするようにコントロールをアニメーション化するにはどうすればよいですか？

Question

WPFの古いスタイルの羊皮紙のスクロールのように、どのようにパネルをアニメーション化してロールダウンするように見えるか考えている人はいますか？どんな助けでも大歓迎です。

Answer 1

問題は、これは非常に複雑なアニメーションであり、コントロールの残りの部分は反転されずに押し込まれる必要があることです。だから、これは簡単なスケールや伸縮アニメーションでは答えられません。あなたは、あなたのユーザコンソールを指すVisualBrushes上で複数のアニメーションを使用できるかもしれませんが、実行時にこれらのものを入れ替えることは複雑です。

私はあなたがCodePlexの上Transitionalsプロジェクトをチェックアウトをお勧めしたいと思い

：

Transitionals Project

Transitionalsは、アニメーションの多くの異なる種類が含まれており、一つはあなたのために十分近いかもしれません。そうでない場合は、トランジションがどのように構築されているかを見て、ニーズを満たすためにトランジションを調整できるかどうかを確認できます。

最後に、これを行う最も効果的な方法はシェーダです。シェーダはいくつかの数学を必要とし、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イベントがブロックされます。