如何为控件设置动画，使其像 WPF 中的羊皮纸滚动一样滚动？答案

【问题标题】：How can I animate a control so that it rolls out like a parchment scroll in WPF?如何为控件设置动画，使其像 WPF 中的羊皮纸滚动一样滚动？
【发布时间】：2015-06-05 18:40:34
【问题描述】：

有谁知道如何为面板设置动画，使其看起来像在 WPF 中的旧式羊皮纸滚动中一样滚动？任何帮助将不胜感激。

【问题讨论】：

我刚刚闪回了一个旧的 Broderbund 游戏……不记得它的名字了。糟糕的 CGI 图形，老船的大炮战斗......也许是第一款海盗游戏？该死的，那是一场糟糕的比赛。里面有一个卷轴。

标签： wpf animation

【解决方案1】：

问题在于，这是一个相当复杂的动画，需要将控件的一部分反转和挤压，而控件的其余部分则不需要。所以这不能用简单的缩放或拉伸动画来回答。您也许可以在 VisualBrushes 上使用指向您的用户控件的多个动画，但在运行时将这些东西换入和换出确实很复杂。

我想建议您查看 CodePlex 上的 Transitionals 项目：

Transitionals Project

Transitionals 包含许多不同类型的动画，其中一种可能对您来说已经足够接近。如果没有，您可以查看过渡是如何构建的，看看是否可以调整一个以满足您的需求。

最后，最高效的方法是使用着色器。但是，着色器需要一些数学知识，并且是用 HLSL（不是 C#）编写的。如果您有兴趣了解更多信息，我强烈建议您查看以下文章：

Writing custom GPU-based Effects for WPF

【讨论】：

【解决方案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 事件。

【讨论】：

我意识到这是一个复杂的效果。像这样动画高度和宽度是我已经可以做的，但是谢谢！