先看圖：

這不是馬蓉，跟寶寶也沒關(guān)系

無標(biāo)題，不簡書。

蘋果在開發(fā)框架中并沒有給我們提供太多的圖形處理API，模糊效果也只提供了高斯模糊，而且還有使用的限制。如果需要簡單的實(shí)現(xiàn)其他的模糊效果，我們需要用到一些第三方框架。
下面我們會用到GPUImage， 這個(gè)庫有什么用呢？
在iOS 中，GPUImage是目前做圖片、相機(jī)濾鏡最主流的框架，沒有之一，還支持照相機(jī)和攝像機(jī)的實(shí)時(shí)濾鏡，它基于OpenGL對圖片處理單元進(jìn)行封裝，通過GPU進(jìn)行圖形加速處理，所以使用GPUImage 也是讓你的應(yīng)用保持60幀必不可少的，GPUImage還提供了非常多的常用的濾鏡，使用也特別簡單。也就是說GPUImage能帶你玩轉(zhuǎn)所有的圖像處理，你可以通過GPUImage 實(shí)現(xiàn)很多炫酷的效果。今年很火的Prisma 肯定都用過了，目測也是通過GPUImage來實(shí)現(xiàn)。

GPUImage

這里介紹一下GPUImage的基本概念：
GPUImageInput 輸入源
GPUImageOutput 輸出源
GPUImageFilter 濾鏡 可以是輸出源，也可以是輸入源

圖片處理生成就像一根管道，類似這樣:

摘自網(wǎng)絡(luò)

在處理過程中，可以添加多個(gè)濾鏡進(jìn)行圖形處理。

簡單的實(shí)現(xiàn)流程是先通過 GPUImagePicture 對象作為輸入源傳給 GPUImageFilter，然后filter將處理好的圖像傳給 GPUImageView 最終顯示到設(shè)備上。
在加入濾鏡修改濾鏡的屬性之后，我們需要調(diào)用processImage 來抓取處理過的圖像呈現(xiàn)出來。

let gpuImagePic = GPUImagePicture(image: image)
let filter = GPUImagePixellateFilter()
let gpuImageView = GPUImageView()
filter.addTarget(gpuImageView)
filter.forceProcessingAtSize(image!.size)
filter.fractionalWidthOfAPixel = 0.1
filter.useNextFrameForImageCapture()
gpuImagePic.addTarget(filter)
gpuImagePic.processImage()
self.view.addSubview(gpuImageView)

CADisplayLink

然后就是動(dòng)畫了，這里用到了CADisplayLink，CADisplayLink也可以說是一個(gè)定時(shí)器。因?yàn)镃ADisplayLink可以保證與屏幕刷新率相同的頻率，目前主流屏幕都是60Hz，也就是60幀/秒。如果應(yīng)用的運(yùn)行幀能達(dá)到60幀/秒，那就是如絲般順滑了。(現(xiàn)在有些高端顯示屏幕刷新率也達(dá)到了144Hz)。既然使用了GPUImage，那當(dāng)然不用擔(dān)心性能了，GPU的圖像處理效率比CPU自然高很多。
CADisplayLink 需要加入到Runloop中使用，通過 paused 屬性來控制開始，暫停。

let displayLink = CADisplayLink(target: self, selector: #selector(transition(_:)))
displayLink.addToRunLoop(NSRunLoop.mainRunLoop(), forMode: NSRunLoopCommonModes)
displayLink.paused = true

然后將每一幀都生成圖像，通過調(diào)用 processImage() 顯示出來：

func transition(link: CADisplayLink) {
    if startTime == 0 {
        startTime = link.timestamp
    }
    progress = max(0, min(CGFloat(link.timestamp - startTime) / duration, 1))
    if isShow {
        filter.fractionalWidthOfAPixel = 0.1 * (1 - progress)
    } else {
        filter.fractionalWidthOfAPixel = 0.1 * progress
    }
    gpuImagePic.processImage()
    if progress == 1 {
        displayLink.paused = true
    }
}

然后，你就多了一個(gè)可已看透馬賽克的技能了。恭喜。

還有，大家覺得馬賽克可逆么？

文中的例子可以在這里下載到。