如何为任何控件的可见性变化提供滑动动画答案

【问题标题】：How to provide sliding animation on visibility change for any control如何为任何控件的可见性变化提供滑动动画
【发布时间】：2018-05-18 22:09:18
【问题描述】：

我想为堆栈面板的可见性变化提供动画。 Windows 10 的 Paint 3D 为单击菜单按钮时的导航视图提供动画幻灯片。我想对堆栈面板的可见性改变做同样的滑动效果。我使用 Microsoft.Toolkit.Uwp.UI.Animations 和以下代码尝试了动画

          <animations:Implicit.ShowAnimations>
            <animations:TranslationAnimation  Duration="0:0:1" From="0" To="1">
                <animations:ScalarKeyFrame Key="0.2" Value="0.6"/>
                <animations:ScalarKeyFrame Key="0.4" Value="0.3"/>
                <animations:ScalarKeyFrame Key="0.6" Value="0.8"/>
                <animations:ScalarKeyFrame Key="0.8" Value="0.5"/>
            </animations:TranslationAnimation>
        </animations:Implicit.ShowAnimations>

        <animations:Implicit.HideAnimations>
            <animations:OpacityAnimation Duration="0:0:1" From="1" To="0">
                <animations:ScalarKeyFrame Key="0.2" Value="0.5"/>
                <animations:ScalarKeyFrame Key="0.4" Value="0.8"/>
                <animations:ScalarKeyFrame Key="0.6" Value="0.3"/>
                <animations:ScalarKeyFrame Key="0.8" Value="0.6"/>
            </animations:OpacityAnimation>
        </animations:Implicit.HideAnimations>

但这只是让堆栈面板淡入淡出，我想从左到右滑动它。

【问题讨论】：

嗨 Raghva，你已经尝试了什么？也许如果您使用tour 并阅读如何提出问题...
您是否尝试过使用 VS blend 创建故事板？它非常易于使用并支持复杂的动画。
不，我没有尝试使用故事板，因为我对此一无所知。如果您知道我可以看到故事板的最佳位置吗？
翻译动画使用 Vector3KeyFrames，而不是 ScalarKeyFrames。您将无法通过情节提要轻松实现自动可见性更改 - 保持组合是更好的主意。

标签： c# uwp uwp-xaml

【解决方案1】：

您可以在一个 <animations:Implicit.ShowAnimations> 元素中放置多个项目，因此您可以在其中添加 Translation 和 Opacity 动画。

此外，平移使用绝对值，因此您正在做的是将面板当前仅向右移动一个像素，这是难以察觉的。例如，尝试设置From="-200" 和To="0"。

【讨论】：