4

我试图让一个面板为 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>

我如何解决正确搬入/搬出？

4

2 回答 2

3

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

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

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

您还应该知道，渲染转换的目标可能有点棘手，请参阅此问题以获取更多信息

这是 RenderTransforms ( MSDN )的文档

于 2014-03-11T16:49:28.637 回答
0

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

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

<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 – 面板从左侧或右侧滑入动画

于 2020-07-02T00:57:36.187 回答