.NET MAUI中Android端Image的FadeTo动画无法正常运行

问题分析 #

你的代码在Windows模拟器正常，但Android端直接切换图片无动画，核心问题在于动画时序控制不当和异步操作未正确等待：

• Device.StartTimer的1000ms间隔和动画时长1000ms重叠，下一次循环会直接覆盖当前动画状态
• 未等待picField1.FadeTo完成就进行后续操作，Android的UI线程调度导致动画被跳过
• 冗余的Device.BeginInvokeOnMainThread嵌套反而可能干扰动画执行

修正方案 #

改用async/await循环替代Device.StartTimer，严格控制动画执行顺序，确保每一次淡入淡出完成后再切换下一组图片：

修正后的TimelapsePage.xaml.cs代码 #

private int i = 0; // 确保初始化索引

private async void Button_Clicked(object sender, EventArgs e)
{
    await StartAnimation();
}

private async Task StartAnimation()
{
    // 重置索引，防止重复点击导致索引越界
    i = 0;
    
    // 先初始化第一张图片
    picField1.Source = imageSources[i];
    picField1.Opacity = 1;
    picField2.Opacity = 0;

    while (i < imageSources.Count - 1)
    {
        // 设置下一张图片到picField2
        picField2.Source = imageSources[i + 1];
        
        // 同时执行淡入淡出动画，等待两个动画都完成
        var fadeOutTask = picField1.FadeTo(0, 1000, Easing.Linear);
        var fadeInTask = picField2.FadeTo(1, 1000, Easing.Linear);
        await Task.WhenAll(fadeOutTask, fadeInTask);
        
        // 交换两个Image的角色，复用控件避免重复创建
        var tempSource = picField1.Source;
        picField1.Source = picField2.Source;
        picField2.Source = tempSource;
        
        picField1.Opacity = 1;
        picField2.Opacity = 0;
        
        i++;
    }
}

额外优化建议 #

1. 设置Image的Aspect属性：在XAML的Image标签中添加Aspect="AspectFit"，确保图片在Android上正确渲染，避免因图片尺寸问题导致动画异常

   <Image Grid.Row="1" Grid.Column="0" x:Name="picField1" Aspect="AspectFit" />
   <Image Grid.Row="1" Grid.Column="0" x:Name="picField2" Aspect="AspectFit" />
   

2. 检查图片加载状态：如果图片是本地资源，确保Android平台的资源放置正确（Resources/drawable目录）；如果是网络图片，等待图片加载完成再开始动画，可通过Image.Loaded事件判断
3. 避免Obsolete API：移除[Obsolete]标记，改用MainThread.BeginInvokeOnMainThread替代旧的Device.BeginInvokeOnMainThread（如果需要的话）

为什么之前的代码在Windows正常？ #

Windows的UI线程调度相对宽松，即使动画时序混乱也能部分执行；而Android对UI操作的时序要求更严格，未正确等待的异步操作会被直接跳过，导致看不到动画效果。

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