如何为控件可见性变化添加左右滑动动画（以StackPanel为例）

你当前的代码没达到预期效果，核心问题是TranslationAnimation的参数设置不对——你设的From和To是0到1，数值范围太小，也没明确指定动画作用的轴，所以看不到明显的滑动效果。要实现Windows 10 Paint 3D那种左侧滑入的效果，得让StackPanel从视口外的左侧位置，动画到正常显示位置，滑出则反向操作，同时配合透明度过渡会更自然。

下面是修正后的完整代码，完美贴合你想要的效果：

<!-- 先确保页面根元素已声明动画命名空间 -->
<!-- xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations" -->

<StackPanel x:Name="NavMenuPanel" Width="320">
    <!-- 显示动画：从左侧滑入+淡入 -->
    <animations:Implicit.ShowAnimations>
        <animations:TranslationAnimation 
            Duration="0:0:0.3" 
            Axis="X"
            From="-320"  <!-- 数值和StackPanel的Width保持一致 -->
            To="0">
            <animations:ScalarKeyFrame Key="0.2" Value="-256"/>
            <animations:ScalarKeyFrame Key="0.4" Value="-128"/>
            <animations:ScalarKeyFrame Key="0.6" Value="-64"/>
            <animations:ScalarKeyFrame Key="0.8" Value="-16"/>
        </animations:TranslationAnimation>
        <animations:OpacityAnimation 
            Duration="0:0:0.3"
            From="0" 
            To="1"/>
    </animations:Implicit.ShowAnimations>

    <!-- 隐藏动画：滑出到左侧+淡出 -->
    <animations:Implicit.HideAnimations>
        <animations:TranslationAnimation 
            Duration="0:0:0.3" 
            Axis="X"
            From="0" 
            To="-320">
            <animations:ScalarKeyFrame Key="0.2" Value="-64"/>
            <animations:ScalarKeyFrame Key="0.4" Value="-128"/>
            <animations:ScalarKeyFrame Key="0.6" Value="-192"/>
            <animations:ScalarKeyFrame Key="0.8" Value="-256"/>
        </animations:TranslationAnimation>
        <animations:OpacityAnimation 
            Duration="0:0:0.3"
            From="1" 
            To="0"/>
    </animations:Implicit.HideAnimations>

    <!-- 这里放你的菜单内容 -->
    <TextBlock Text="首页" Margin="16,12"/>
    <TextBlock Text="创作" Margin="16,12"/>
    <TextBlock Text="素材库" Margin="16,12"/>
</StackPanel>

关键调整说明： #

• 指定动画轴为X：明确让TranslationAnimation作用在水平方向，确保是左右滑动而非上下。
• 匹配偏移数值与面板宽度：滑入时From设为负的面板宽度（比如-320），让面板初始在视口左侧外，To设为0回到正常位置；滑出则反向从0到-320。
• 组合透明度动画：滑动同时加上淡入淡出，过渡更柔和，和Paint 3D的原生效果对齐。
• 优化动画时长与关键帧：把时长从1秒缩到0.3秒（Windows原生动画普遍在200-300ms），关键帧按比例设置偏移值，让滑动节奏更流畅自然。

最后别忘了确认项目已经安装了Microsoft.Toolkit.Uwp.UI.Animations NuGet包，这样代码就能正常运行啦。

内容的提问来源于stack exchange，提问作者Raghva