UWP如何实现Button从Y坐标10到Y坐标0的位移动画效果

UWP中可以通过DoubleAnimation搭配TranslateTransform实现按钮的Y轴位移动画，内置的EasingFunction可直接支持三种缓动效果，以下是两种常用实现方式：

方法1：XAML声明式实现（适合固定触发场景） #

先在XAML中定义动画和目标按钮：

<Page.Resources>
    <!-- 缓入缓出版本动画 -->
    <Storyboard x:Name="MoveEaseInOutAnim">
        <DoubleAnimation 
            Storyboard.TargetName="TargetBtn"
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
            From="10" To="0" Duration="0:0:0.3"
            EnableDependentAnimation="True">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseInOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <!-- 缓入版本动画 -->
    <Storyboard x:Name="MoveEaseInAnim">
        <DoubleAnimation 
            Storyboard.TargetName="TargetBtn"
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
            From="10" To="0" Duration="0:0:0.3"
            EnableDependentAnimation="True">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <!-- 缓出版本动画 -->
    <Storyboard x:Name="MoveEaseOutAnim">
        <DoubleAnimation 
            Storyboard.TargetName="TargetBtn"
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
            From="10" To="0" Duration="0:0:0.3"
            EnableDependentAnimation="True">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>
</Page.Resources>

<!-- 目标按钮，默认Y偏移为10 -->
<Button x:Name="TargetBtn" Content="点击触发动画" Click="TargetBtn_Click">
    <UIElement.RenderTransform>
        <TranslateTransform Y="10"/>
    </UIElement.RenderTransform>
</Button>

后台代码触发对应动画：

private void TargetBtn_Click(object sender, RoutedEventArgs e)
{
    // 按需调用对应缓动的动画即可
    MoveEaseInOutAnim.Begin();
    // MoveEaseInAnim.Begin();
    // MoveEaseOutAnim.Begin();
}

方法2：C#代码动态实现（适合需要动态调整参数的场景） #

封装通用动画方法，可直接传入缓动类型参数：

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;

public void RunButtonMoveAnim(Button target, EasingMode easingMode, double duration = 0.3)
{
    // 初始化位移变换
    if (target.RenderTransform is not TranslateTransform transform)
    {
        transform = new TranslateTransform { Y = 10 };
        target.RenderTransform = transform;
    }

    // 创建位移动画
    var moveAnim = new DoubleAnimation
    {
        From = 10,
        To = 0,
        Duration = TimeSpan.FromSeconds(duration),
        EnableDependentAnimation = true,
        EasingFunction = new QuadraticEase { EasingMode = easingMode }
    };

    // 绑定并启动动画
    Storyboard.SetTarget(moveAnim, target);
    Storyboard.SetTargetProperty(moveAnim, "(UIElement.RenderTransform).(TranslateTransform.Y)");
    var storyboard = new Storyboard();
    storyboard.Children.Add(moveAnim);
    storyboard.Begin();
}

调用示例：

// 触发缓入缓出动画
RunButtonMoveAnim(TargetBtn, EasingMode.EaseInOut);
// 触发缓入动画
RunButtonMoveAnim(TargetBtn, EasingMode.EaseIn);
// 触发缓出动画
RunButtonMoveAnim(TargetBtn, EasingMode.EaseOut);

缓动效果说明 #

• EaseInOut：动画启动、结束阶段速度平缓，中间段速度最快
• EaseIn：动画启动时速度慢，后续逐步加速到最高速
• EaseOut：动画启动时速度最快，后续逐步减速直到停止

注意：EnableDependentAnimation必须设置为True，UWP默认禁用部分属性的依赖动画，开启后才能正常执行。如果需要调整缓动曲线，也可以将QuadraticEase替换为CubicEase、CircleEase等其他内置缓动类。

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