如何用Objective-C/Swift通过视频帧或UIImage数组生成带抖动的自然GIF

当你为GIF开启抖动选项保存时，生成的GIF视觉效果会更自然。

实现原理 #

GIF格式最多支持256色的索引调色板，直接对真彩色图像降色编码会出现明显的色带断层。抖动算法通过将像素的量化误差扩散到相邻像素，用不同颜色像素的疏密分布模拟过渡色，有效消除色带，提升视觉效果。行业内普遍采用Floyd-Steinberg误差扩散算法实现，兼顾了性能和最终画质表现。

Swift 完整实现 #

1. 图像抖动处理扩展 #

import UIKit
import ImageIO
import MobileCoreServices

extension UIImage {
    func applyingFloydSteinbergDithering() -> UIImage? {
        guard let cgImage = self.cgImage else { return nil }
        let width = cgImage.width
        let height = cgImage.height
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bytesPerPixel = 4
        let bytesPerRow = bytesPerPixel * width
        let bitsPerComponent = 8
        let bitmapInfo = CGImageAlphaInfo.premultipliedLast.rawValue
        
        guard let context = CGContext(
            data: nil,
            width: width,
            height: height,
            bitsPerComponent: bitsPerComponent,
            bytesPerRow: bytesPerRow,
            space: colorSpace,
            bitmapInfo: bitmapInfo
        ), let data = context.data else { return nil }
        
        context.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
        let pixelBuffer = data.bindMemory(to: UInt8.self, capacity: width * height * 4)
        
        // Floyd-Steinberg 误差扩散权重配置
        let diffusionOffsets = [
            (x: 1, y: 0, weight: 7.0 / 16.0),
            (x: -1, y: 1, weight: 3.0 / 16.0),
            (x: 0, y: 1, weight: 5.0 / 16.0),
            (x: 1, y: 1, weight: 1.0 / 16.0)
        ]
        
        for y in 0..<height {
            for x in 0..<width {
                let index = (y * width + x) * 4
                let r = Double(pixelBuffer[index])
                let g = Double(pixelBuffer[index + 1])
                let b = Double(pixelBuffer[index + 2])
                
                // 颜色量化（可替换为自定义全局调色板量化逻辑提升效果）
                let quantizedR = round(r / 255.0 * 31.0) * 255.0 / 31.0
                let quantizedG = round(g / 255.0 * 31.0) * 255.0 / 31.0
                let quantizedB = round(b / 255.0 * 31.0) * 255.0 / 31.0
                
                pixelBuffer[index] = UInt8(quantizedR)
                pixelBuffer[index + 1] = UInt8(quantizedG)
                pixelBuffer[index + 2] = UInt8(quantizedB)
                
                // 计算并扩散误差
                let errorR = r - quantizedR
                let errorG = g - quantizedG
                let errorB = b - quantizedB
                
                for offset in diffusionOffsets {
                    let nx = x + offset.x
                    let ny = y + offset.y
                    guard nx >= 0, nx < width, ny >= 0, ny < height else { continue }
                    let nIndex = (ny * width + nx) * 4
                    pixelBuffer[nIndex] = UInt8(min(255, max(0, Double(pixelBuffer[nIndex]) + errorR * offset.weight)))
                    pixelBuffer[nIndex + 1] = UInt8(min(255, max(0, Double(pixelBuffer[nIndex + 1]) + errorG * offset.weight)))
                    pixelBuffer[nIndex + 2] = UInt8(min(255, max(0, Double(pixelBuffer[nIndex + 2]) + errorB * offset.weight)))
                }
            }
        }
        
        guard let ditheredCGImage = context.makeImage() else { return nil }
        return UIImage(cgImage: ditheredCGImage)
    }
}

2. 批量处理帧并生成GIF #

func generateDitheredGIF(frames: [UIImage], frameDuration: TimeInterval, outputPath: String) -> Bool {
    let outputURL = URL(fileURLWithPath: outputPath)
    guard let destination = CGImageDestinationCreateWithURL(outputURL as CFURL, kUTTypeGIF as CFString, frames.count, nil) else { return false }
    
    // 配置GIF全局属性：无限循环
    let gifProperties = [kCGImagePropertyGIFDictionary as String: [kCGImagePropertyGIFLoopCount as String: 0]] as CFDictionary
    CGImageDestinationSetProperties(destination, gifProperties)
    
    // 配置单帧属性：帧间隔
    let frameProperties = [kCGImagePropertyGIFDictionary as String: [kCGImagePropertyGIFDelayTime as String: frameDuration]] as CFDictionary
    
    for frame in frames {
        autoreleasepool {
            if let ditheredFrame = frame.applyingFloydSteinbergDithering(), let cgFrame = ditheredFrame.cgImage {
                CGImageDestinationAddImage(destination, cgFrame, frameProperties)
            }
        }
    }
    
    return CGImageDestinationFinalize(destination)
}

Objective-C 适配实现 #

UIImage 抖动分类 #

// UIImage+Dithering.h
#import <UIKit/UIKit.h>

@interface UIImage (Dithering)
- (UIImage *)fb_applyingFloydSteinbergDithering;
@end

// UIImage+Dithering.m
#import "UIImage+Dithering.h"
#import <ImageIO/ImageIO.h>
#import <MobileCoreServices/MobileCoreServices.h>

@implementation UIImage (Dithering)
- (UIImage *)fb_applyingFloydSteinbergDithering {
    CGImageRef cgImage = self.CGImage;
    if (!cgImage) return nil;
    size_t width = CGImageGetWidth(cgImage);
    size_t height = CGImageGetHeight(cgImage);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    size_t bytesPerPixel = 4;
    size_t bytesPerRow = bytesPerPixel * width;
    size_t bitsPerComponent = 8;
    uint32_t bitmapInfo = kCGImageAlphaPremultipliedLast;
    
    CGContextRef context = CGBitmapContextCreate(NULL, width, height, bitsPerComponent, bytesPerRow, colorSpace, bitmapInfo);
    if (!context) {
        CGColorSpaceRelease(colorSpace);
        return nil;
    }
    CGContextDrawImage(context, CGRectMake(0, 0, width, height), cgImage);
    uint8_t *pixelBuffer = (uint8_t *)CGBitmapContextGetData(context);
    
    // Floyd-Steinberg 误差扩散配置
    typedef struct {
        int dx;
        int dy;
        double weight;
    } DiffusionOffset;
    DiffusionOffset offsets[] = {
        {1, 0, 7.0/16.0},
        {-1, 1, 3.0/16.0},
        {0, 1, 5.0/16.0},
        {1, 1, 1.0/16.0}
    };
    int offsetCount = 4;
    
    for (int y = 0; y < height; y++) {
        for (int x = 0; x < width; x++) {
            long pixelIndex = (y * width + x) * 4;
            double r = pixelBuffer[pixelIndex];
            double g = pixelBuffer[pixelIndex + 1];
            double b = pixelBuffer[pixelIndex + 2];
            
            // 颜色量化
            double quantR = round(r / 255.0 * 31.0) * 255.0 / 31.0;
            double quantG = round(g / 255.0 * 31.0) * 255.0 / 31.0;
            double quantB = round(b / 255.0 * 31.0) * 255.0 / 31.0;
            
            pixelBuffer[pixelIndex] = (uint8_t)quantR;
            pixelBuffer[pixelIndex + 1] = (uint8_t)quantG;
            pixelBuffer[pixelIndex + 2] = (uint8_t)quantB;
            
            // 误差扩散
            double errR = r - quantR;
            double errG = g - quantG;
            double errB = b - quantB;
            
            for (int i = 0; i < offsetCount; i++) {
                int nx = x + offsets[i].dx;
                int ny = y + offsets[i].dy;
                if (nx < 0 || nx >= width || ny < 0 || ny >= height) continue;
                long nIndex = (ny * width + nx) * 4;
                pixelBuffer[nIndex] = (uint8_t)MIN(255, MAX(0, pixelBuffer[nIndex] + errR * offsets[i].weight));
                pixelBuffer[nIndex + 1] = (uint8_t)MIN(255, MAX(0, pixelBuffer[nIndex + 1] + errG * offsets[i].weight));
                pixelBuffer[nIndex + 2] = (uint8_t)MIN(255, MAX(0, pixelBuffer[nIndex + 2] + errB * offsets[i].weight));
            }
        }
    }
    
    CGImageRef ditheredCGImage = CGBitmapContextCreateImage(context);
    UIImage *result = [UIImage imageWithCGImage:ditheredCGImage];
    
    CGImageRelease(ditheredCGImage);
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);
    
    return result;
}
@end

优化建议 #

• 对画质要求高的场景，可以统计所有帧的颜色生成全局最优256色调色板，替换默认的按位量化逻辑，进一步提升画质
• 处理视频帧或者大量图片帧时，可以使用Metal实现GPU版抖动算法，大幅降低CPU占用
• 批量处理帧时务必加自动释放池，避免内存峰值过高导致闪退

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