Xamarin.Forms中如何让View平移动画不受屏幕尺寸和横竖屏影响

你遇到的偏移问题核心是动画使用了固定像素的平移参数，Xamarin.Forms的布局会随设备屏幕密度、横竖屏切换发生变化，硬编码的数值无法适配所有场景。你可以按照以下步骤修改代码实现全设备适配的动画效果： #

1. 调整XAML布局结构，移除硬编码负Margin #

将原来StackLayout中用负Margin堆叠Label和Entry的写法，替换为Grid同单元格布局，天然实现元素对齐，从布局层面避免受屏幕尺寸影响：

<!-- 邮箱输入区域示例 -->
<Frame Margin="0,80,0,0" BackgroundColor="Transparent">
    <Grid Padding="20,0">
        <Label Text="Email" TextColor="Black" FontSize="16" 
               VerticalOptions="Center" HorizontalOptions="Start"
               x:Name="emailAnimate" />
        <Entry x:Name="email" VerticalOptions="Center" />
    </Grid>
</Frame>

<!-- 密码输入区域示例 -->
<Frame Margin="0,-10,0,0" BackgroundColor="Transparent">
    <Grid Padding="20,0">
        <Label Text="Password" TextColor="Black" FontSize="16" 
               VerticalOptions="Center" HorizontalOptions="Start"
               x:Name="PassAnimate" />
        <Entry x:Name="password" IsPassword="True" VerticalOptions="Center" />
        <ImageButton Source="hidePass.png" WidthRequest="25" HeightRequest="25" 
                     HorizontalOptions="End" BackgroundColor="Transparent"
                     VerticalOptions="Center" x:Name="show"/>
    </Grid>
</Frame>

2. 动态计算平移参数，替换固定数值 #

动画的平移距离基于Label自身的尺寸计算，不管屏幕参数如何，都能保持相对位置正确：

private void Email_Focused(object sender, FocusEventArgs e)
{
    if (username.IsFocused && string.IsNullOrEmpty(username.Text))
    {
        double scale = 0.8;
        // Y轴向上偏移Label自身高度的90%，刚好浮到输入框上方
        double translateY = -anime_user.Height * 0.9;
        // X轴偏移补正缩放带来的左边距，保持和输入框左对齐
        double translateX = -(anime_user.Width * (1 - scale) / 2);
        anime_user.ScaleTo(scale, 150);
        anime_user.TranslateTo(translateX, translateY, 150);
    }
}

private void Email_Unfocused(object sender, FocusEventArgs e)
{
    if (!username.IsFocused && string.IsNullOrEmpty(username.Text))
    {
        anime_user.ScaleTo(1, 100);
        anime_user.TranslateTo(0, 0, 100);
    }
}

// 密码输入框的聚焦/失焦逻辑和邮箱完全一致，复用相同计算逻辑即可
private void Password_Focused(object sender, FocusEventArgs e)
{
    if (pass.IsFocused && string.IsNullOrEmpty(pass.Text))
    {
        double scale = 0.8;
        double translateY = -anime_pass.Height * 0.9;
        double translateX = -(anime_pass.Width * (1 - scale) / 2);
        anime_pass.ScaleTo(scale, 150);
        anime_pass.TranslateTo(translateX, translateY, 150);
    }
}

private void Password_Unfocused(object sender, FocusEventArgs e)
{
    if (!pass.IsFocused && string.IsNullOrEmpty(pass.Text))
    {
        anime_pass.ScaleTo(1, 100);
        anime_pass.TranslateTo(0, 0, 100);
    }
}

3. 适配横竖屏切换 #

重写页面尺寸变更回调，横竖屏切换后自动校准Label位置，避免布局刷新后动画偏移：

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    // 横竖屏切换后重新校准两个Label的位置
    AdjustLabelPosition(email, emailAnimate);
    AdjustLabelPosition(password, PassAnimate);
}

private void AdjustLabelPosition(Entry entry, Label label)
{
    if (!string.IsNullOrEmpty(entry.Text) || entry.IsFocused)
    {
        double scale = 0.8;
        double translateY = -label.Height * 0.9;
        double translateX = -(label.Width * (1 - scale) / 2);
        label.Scale = scale;
        label.TranslationX = translateX;
        label.TranslationY = translateY;
    }
    else
    {
        label.Scale = 1;
        label.TranslationX = 0;
        label.TranslationY = 0;
    }
}

以上修改完成后，所有动画参数都基于控件实际渲染尺寸动态计算，完全不受屏幕尺寸、横竖屏切换影响，所有设备都能呈现一致的动画效果。

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