MAUI点击触发重复动画及文本切换时序问题求助

针对你遇到的三个问题，这里给出完整的修复方案：

核心问题分析 #

原代码的问题在于：

• 动画与文本切换同步执行，导致文本先变化
• 重复使用同一个动画名称且未取消旧动画，无法重启
• 仅单个Label，无法实现正反两面的视觉效果

完整实现代码 #

XAML 部分 #

<Border x:Name="cardBorder" HeightRequest="200" WidthRequest="300" BackgroundColor="LightGray" CornerRadius="8">
    <Border.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnCardTapped" />
    </Border.GestureRecognizers>
    <!-- 用Grid叠放正反两面的内容 -->
    <Grid>
        <!-- 正面Label -->
        <Label x:Name="frontLabel" 
               Text="One side" 
               HorizontalOptions="Center" 
               VerticalOptions="Center"
               FontSize="Large" 
               FontAttributes="Bold" />
        <!-- 反面Label：初始翻转180度，隐藏状态 -->
        <Label x:Name="backLabel" 
               Text="The other side" 
               HorizontalOptions="Center" 
               VerticalOptions="Center"
               FontSize="Large" 
               FontAttributes="Bold"
               RotationY="180"
               IsVisible="False" />
    </Grid>
</Border>

C# 代码部分 #

private bool _isFrontVisible = true;

private async void OnCardTapped(object sender, TappedEventArgs e)
{
    // 取消当前正在执行的动画，确保每次点击都能重启
    cardBorder.AbortAnimation("FlipAnimation");

    // 第一步：旋转到90度（侧对用户，此时看不到卡片内容）
    await cardBorder.RotateYTo(90, 500, Easing.SinInOut);

    // 切换正反两面的可见性
    frontLabel.IsVisible = _isFrontVisible;
    backLabel.IsVisible = !_isFrontVisible;
    _isFrontVisible = !_isFrontVisible;

    // 第二步：旋转到目标角度（180度显示反面，0度显示正面）
    var targetRotation = _isFrontVisible ? 0 : 180;
    await cardBorder.RotateYTo(targetRotation, 500, Easing.SinInOut);
}

方案说明 #

• 等待动画完成后切换内容：通过await关键字等待RotateYTo异步方法完成，确保旋转到侧面后再切换Label可见性，完全符合视觉逻辑。
• 支持重复点击重启动画：每次点击先调用AbortAnimation取消旧动画，无论之前的动画是否完成，都能立即触发新的翻转。
• 真实正反两面效果：用Grid叠放两个Label，反面初始翻转180度，当卡片旋转到180度时，反面文本会自动转正，动画过程中能模拟真实的卡片翻面视觉效果。

另外，添加了Easing.SinInOut让动画过渡更自然，你可以根据需求调整动画时长（500毫秒）或缓动函数。

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