WPF 面板从左侧动画滑入答案

【问题标题】：WPF panel slide in from left animationWPF 面板从左侧动画滑入
【发布时间】：2014-03-11 16:32:44
【问题描述】：

我正在尝试让面板为 WPF 中的滑动行为设置动画。面板从中心向外填充，而不是从左侧填充，它只在第一次动画。

下面是我的动画的标记。

<Style.Triggers>
        <Trigger  Property="Visibility" Value="Visible">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="200" Duration="0:0:0.5"
                                         AccelerationRatio="0.2" DecelerationRatio="0.1"
                                         Storyboard.TargetProperty="Width"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>

我该如何正确搬入/搬出？

【问题讨论】：

标签： wpf wpf-animation

【解决方案1】：

不要为“宽度”之类的属性设置动画，这就是 RenderTransforms 的用途。

要获得您描述的行为（“滑入”），您希望将 TranslateTransform 从屏幕/页面上的某个 X 动画到最终位置。

要获得您的 XAML 和您的帖子的其余部分所指示的行为，您将使用 ScaleTransform 并将原点设置为面板的左侧。

您还应该知道，渲染转换的目标可能有点棘手，请参阅question 了解更多信息

这里是 RenderTransforms 的文档 (MSDN)

【讨论】：

这个问题的另一个答案是我所说的一个很好的代码示例。
它没有从屏幕左侧出现，而是从另一个控件滑出。这导致了一些问题。
@Brian Triplett 那么也许你最终确实想要比例变换。使用 ScaleTransform（ScaleX 属性）将具有与动画宽度相同的视觉效果，并且您可以将变换原点设置在控件的左侧，从而生成您要求的效果。
ScaleTransform 只是将其拉伸（看起来更像是一个糟糕的 powerpoint 效果）。我一直在寻找更多的幻灯片。我已经看到使用 Expander 完成此操作，可以尝试一下。
我同意，ScaleTransform 看起来不会很好。扩展器可以满足您的需求。您还可以使用翻译转换并将父控件的 ClipToBounds 属性设置为“true”（使其隐藏其剪辑区域之外的所有子片段）。

【解决方案2】：

应应用并更改要移动的控件/面板的TransformTranslate 坐标，而不是其宽度。

出于考虑，我将使用Rectangle 作为我们的示例，如果想要移动它，我们将首先设置一些锚点坐标：

<Rectangle Width="100">
   <Rectangle.RenderTransform>
       <TranslateTransform X="0" Y="0" />
   </Rectangle.RenderTransform>
 </Rectangle>

然后要将其从原始位置移动，请更改 X 或 Y 变换。因此，如果我们想将其向右移动 100 像素大小，我们将执行 StoryBoard 如下：

<Storyboard x:Key="SlideRight">
    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                     From="0" To="100"
                     Duration="0:0:0.3" />
</Storyboard>

这篇文章是我在尝试类似滑入/滑出过程时发现的。因为每个组件都是自己的帖子，所以我写了一篇博客文章，引导用户完成整个流程：

WPF – Panel Slide-In Animation From Left Or Right Side

【讨论】：