使用UIImage数组创建GIF时出现非预期异常效果的问题求解

问题根因 #

你的代码存在4个核心问题导致GIF生成异常：

• 未显式配置GIF颜色量化规则，系统默认生成的全局调色板无法适配广色域、带透明通道的图片，会出现杂色、色块漂移等异常效果
• 直接取UIImage.cgImage会丢失图片的方向元数据，方向非朝上的图片渲染时会出现错位、拉伸
• kCGImagePropertyGIFDelayTime参数错误传入了字符串类型，该参数要求传入数值类型，系统解析错误会导致帧渲染异常
• 未配置GIF帧的销毁规则，前序帧的残留像素会和后续帧叠加出现重影

修复后的完整代码 #

import UIKit
import ImageIO
import MobileCoreServices

func generateImagesToGif(photos: [UIImage], filename: String) -> Bool {
    // 自动补全.gif后缀
    let finalFilename = filename.hasSuffix(".gif") ? filename : filename + ".gif"
    let documentsDirectoryPath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)[0]
    let path = (documentsDirectoryPath as NSString).appendingPathComponent(finalFilename)
    let cfURL = URL(fileURLWithPath: path) as CFURL
    
    // 全局GIF配置：循环次数为0表示无限循环，固定8位颜色深度适配GIF标准
    let fileProperties: [CFString: Any] = [
        kCGImagePropertyGIFDictionary: [
            kCGImagePropertyGIFLoopCount: 0
        ],
        kCGImagePropertyColorModel: kCGImagePropertyColorModelRGB,
        kCGImagePropertyDepth: 8
    ]
    
    guard let destination = CGImageDestinationCreateWithURL(cfURL, kUTTypeGIF, photos.count, nil) else {
        return false
    }
    CGImageDestinationSetProperties(destination, fileProperties as CFDictionary)
    
    for photo in photos {
        // 修正图片方向，生成符合渲染要求的CGImage
        guard let normalizedImage = photo.fixedOrientation(), let cgImage = normalizedImage.cgImage else {
            continue
        }
        // 单帧配置：0.5s间隔、帧渲染后自动清理背景避免重影
        let gifFrameProperties: [CFString: Any] = [
            kCGImagePropertyGIFDictionary: [
                kCGImagePropertyGIFDelayTime: 0.5,
                kCGImagePropertyGIFDisposalMethod: kCGImagePropertyGIFDisposalBackground
            ]
        ]
        CGImageDestinationAddImage(destination, cgImage, gifFrameProperties as CFDictionary)
    }
    
    return CGImageDestinationFinalize(destination)
}

// UIImage扩展：统一修正图片方向为朝上
extension UIImage {
    func fixedOrientation() -> UIImage? {
        guard imageOrientation != .up else { return self }
        
        var transform = CGAffineTransform.identity
        switch imageOrientation {
        case .down, .downMirrored:
            transform = transform.translatedBy(x: size.width, y: size.height)
            transform = transform.rotated(by: .pi)
        case .left, .leftMirrored:
            transform = transform.translatedBy(x: size.width, y: 0)
            transform = transform.rotated(by: .pi / 2)
        case .right, .rightMirrored:
            transform = transform.translatedBy(x: 0, y: size.height)
            transform = transform.rotated(by: -.pi / 2)
        default: break
        }
        
        switch imageOrientation {
        case .upMirrored, .downMirrored:
            transform = transform.translatedBy(x: size.width, y: 0)
            transform = transform.scaledBy(x: -1, y: 1)
        case .leftMirrored, .rightMirrored:
            transform = transform.translatedBy(x: size.height, y: 0)
            transform = transform.scaledBy(x: -1, y: 1)
        default: break
        }
        
        guard let cgImage = cgImage, let context = CGContext(
            data: nil,
            width: Int(size.width),
            height: Int(size.height),
            bitsPerComponent: cgImage.bitsPerComponent,
            bytesPerRow: 0,
            space: cgImage.colorSpace ?? CGColorSpaceCreateDeviceRGB(),
            bitmapInfo: cgImage.bitmapInfo.rawValue
        ) else { return nil }
        
        context.concatenate(transform)
        switch imageOrientation {
        case .left, .leftMirrored, .right, .rightMirrored:
            context.draw(cgImage, in: CGRect(x: 0, y: 0, width: size.height, height: size.width))
        default:
            context.draw(cgImage, in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        }
        
        return context.makeImage().flatMap { UIImage(cgImage: $0) }
    }
}

额外优化建议 #

• 如果原图是带透明通道的PNG，可以在全局配置中增加kCGImagePropertyGIFHasGlobalColorMap: true强制使用全局颜色表，进一步减少色偏
• 生成大尺寸GIF时可以先将图片统一缩放到目标尺寸，既可以降低内存占用也能提升生成速度

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