MAUI中实现图片平滑过渡及解决闪烁问题求助

1. 预加载所有动画图片 #

问题核心大概率是每次切换Source时才触发图片加载，导致短暂空白。提前将所有动画图片加载到内存并缓存，避免切换时的延迟：

public class ImagesReferences
{
    private static readonly Lazy<ImagesReferences> _instance = new Lazy<ImagesReferences>(() => new ImagesReferences());
    public static ImagesReferences Instance => _instance.Value;

    public List<ImageSource> animationCover { get; private set; }

    private ImagesReferences()
    {
        animationCover = new List<ImageSource>();
        // 替换为你的动画帧文件名列表
        var frameNames = new[] { "frame1.png", "frame2.png", "frame3.png" };
        
        foreach (var name in frameNames)
        {
            // 嵌入资源格式：[项目名].[资源文件夹名].[文件名]
            var source = ImageSource.FromResource($"YourProjectName.Images.{name}", typeof(ImagesReferences).Assembly);
            // 强制触发图片加载，提前存入内存
            _ = source.LoadImageAsync();
            animationCover.Add(source);
        }
    }
}

2. 开启MAUI图片缓存 #

在MauiProgram.cs中配置全局图片缓存，重复使用的图片会直接从缓存读取：

builder.ConfigureImages(options =>
{
    options.CachingEnabled = true;
    options.MaxCacheSize = 1024 * 1024 * 50; // 设置50MB缓存空间
});

3. 优化动画逻辑（替换递归调用） #

原递归调用AnimateImage可能导致UI线程调度异常，改用循环方式更稳定：

private async Task AnimateImage(bool isAnimationUp, CancellationToken cancellationToken)
{
    try
    {
        while (!cancellationToken.IsCancellationRequested)
        {
            ImageAnimatedCover.Source = ImagesReferences.Instance.animationCover[currentImageIndex];
            
            await Task.Delay(80, cancellationToken);

            if (isAnimationUp)
            {
                if (currentImageIndex < ImagesReferences.Instance.animationCover.Count - 1)
                    currentImageIndex++;
                else
                    break; // 动画结束，可根据需求改为循环播放
            }
            else
            {
                if (currentImageIndex >= 1)
                    currentImageIndex--;
                else
                    break;
            }
        }
    }
    catch (OperationCanceledException)
    {
        Debug.WriteLine("Animation annulée");
    }
}

4. 用SkiaSharp实现无闪烁帧动画 #

如果上述方法仍有闪烁，可改用SkiaSharp直接绘制帧动画，绕过Image控件的Source切换开销：

private SKBitmap[] _animationFrames;
private int _currentFrame;
// 假设页面中有一个SKCanvasView控件，命名为CanvasView

// 初始化时加载所有帧
private void LoadAnimationFrames()
{
    var assembly = typeof(YourPage).Assembly;
    var frameNames = new[] { "frame1.png", "frame2.png" };
    _animationFrames = new SKBitmap[frameNames.Length];
    
    for (int i = 0; i < frameNames.Length; i++)
    {
        using var stream = assembly.GetManifestResourceStream($"YourProject.Images.{frameNames[i]}");
        _animationFrames[i] = SKBitmap.Decode(stream);
    }
}

// SKCanvasView的PaintSurface事件处理
private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    var canvas = e.Surface.Canvas;
    canvas.Clear();
    
    if (_animationFrames != null && _currentFrame < _animationFrames.Length)
    {
        canvas.DrawBitmap(_animationFrames[_currentFrame], 0, 0);
    }
}

// 动画逻辑
private async Task AnimateSkia(bool isAnimationUp, CancellationToken cancellationToken)
{
    try
    {
        while (!cancellationToken.IsCancellationRequested)
        {
            _currentFrame = isAnimationUp ? 
                Math.Min(_currentFrame + 1, _animationFrames.Length - 1) : 
                Math.Max(_currentFrame - 1, 0);
            
            CanvasView.InvalidateSurface(); // 触发画布重绘
            await Task.Delay(80, cancellationToken);

            if ((isAnimationUp && _currentFrame == _animationFrames.Length - 1) || 
                (!isAnimationUp && _currentFrame == 0))
                break;
        }
    }
    catch (OperationCanceledException)
    {
        Debug.WriteLine("Animation annulée");
    }
}

5. 检查图片本身的问题 #

• 改用WebP等轻量化图片格式，压缩图片大小，减少加载时间
• 确保图片分辨率与控件显示尺寸匹配，避免不必要的缩放

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