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

Question

我想为堆栈面板的可见性变化提供动画。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>

但这只会使堆栈面板淡入淡出，我想从左向右滑动它。

Answer 1

您可以将多个项目放在一个<animations:Implicit.ShowAnimations>元素中，这样您就可以在那里添加Translation和Opacity动画。此外，平移使用绝对值，因此您现在所做的只是将面板向右移动一个像素，这是无法察觉的。尝试设置From="-200"，To="0"例如。