Swift 實現可拖動的遮罩層，展現兩張圖片的不同處 - 陳董 Don

上面這張圖來自TinyPNG，他們的圖片壓縮服務真的不錯，不過如果我們需要去比較這兩張圖的差異，
眼球就需要不停的左右移動去看兩張圖，難免會覺得看不出差異在哪裡。

所以如果能夠將兩張圖片堆疊在一起，中間有根桿子來讓我們滑動，通過滑動來看出兩張圖片的差異，就可以變得直觀很多。

這是一張在「裡冷園區」參加高空擊球活動的照片，其實從小時候開始，從高空往下看都會有點恐懼，
不過來到這個園區就是為了不斷突破這個恐懼感，去挑戰各種高空活動。

左邊看得見的部分是原圖，右邊則是修改過的圖，我們可以通過拖動中間的桿子來即時的看見兩張圖在同一個位置上的差異性。

Swift實現方法

最底層，我們放了一張「原圖」，而在原圖的上面蓋著一張「修改過的圖」，而「修改過的圖」的上面我們放了一張maskView。

一開始我麼會將maskView設定在右側並且寬度為屏幕的一半。

這裡的imageView2是指「修改過的圖」，即第二層的那張圖。

我們將imageView2的mask設定為maskView，也就是說，imageView2只會顯示和maskView重疊的部分。

1	imageView2.mask = maskView

然後給中間橘色的barImageView設置一個拖動手勢的偵測（UIPanGesture）

func setupGesture() {

barImageView.isUserInteractionEnabled = true

let panGesture = UIPanGestureRecognizer(target: self, action: #selector(barDidSwipe(gesture:)))

barImageView.addGestureRecognizer(panGesture)

}

barImageView的寬度是25，所以中心點的x可以簡單算成12.5，當使用者拖動中間的bar時，我們改變barImageView以及遮罩層的寬度即可（讓他左側跟著barImageview）。

我們可以得到使用目前拖動的位置（point），通過檢測point.x的位置，接下來就是簡單的計算了。

func barDidSwipe(gesture:UIGestureRecognizer) {

if let panGesture = gesture as? UIPanGestureRecognizer {

let point = panGesture.location(in: view)

let halfBarWidth = CGFloat(12.5)

barImageView.frame.origin.x = point.x - halfBarWidth

let newMaskViewFrame = CGRect(x: point.x,

y: maskView.frame.origin.y,

width: view.frame.width - point.x,

height: maskView.frame.height)

maskView.frame = newMaskViewFrame

}

蒙板1号 說：

2017-04-23 at 13:10

大神你好，想请问一下这里头的蒙板 mask 是 UIImageView.mask，请问和UIImageView.layer.mask 有什么区别吗？（后者过难，而前者太过简单以至于怀疑性能可能极低）

回覆
1. don 說：
  
  2017-04-23 at 16:31
  
  推薦你看這個：iOS核心動畫高級教程
  
  回覆