Swift 实现可拖动式遮罩层

<img class="alignnone size-full wp-image-486" src="https://ios.devdon.com/wp-content/uploads/2017/03/tinypng.png" alt="" width="711" height="319" srcset="https://ios.devdon.com/wp-content/uploads/2017/03/tinypng.png 711w, https://ios.devdon.com/wp-content/uploads/2017/03/tinypng-300x135.png 300w" sizes="(max-width: 711px) 100vw, 711px" />

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

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

<img class="alignnone wp-image-485 " src="https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-576x1024.png" width="397" height="706" srcset="https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-576x1024.png 576w, https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-169x300.png 169w, https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask.png 750w" sizes="(max-width: 397px) 100vw, 397px" />   <img class="alignnone wp-image-494" src="https://ios.devdon.com/wp-content/uploads/2017/03/jumpGIF2.gif" alt="" width="392" height="703" />

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

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

Swift實現方法

<img class="alignnone wp-image-489 " src="https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-xib.png" width="278" height="466" srcset="https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-xib.png 604w, https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-xib-179x300.png 179w" sizes="(max-width: 278px) 100vw, 278px" />  <img class="alignnone wp-image-488 size-large" src="https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-blue-print-1024x736.png" width="640" height="460" srcset="https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-blue-print-1024x736.png 1024w, https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-blue-print-300x216.png 300w, https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-blue-print-768x552.png 768w, https://ios.devdon.com/wp-content/uploads/2017/03/scrollable-mask-blue-print.png 1300w" sizes="(max-width: 640px) 100vw, 640px" />

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

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

設定mask

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

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

imageView2.mask = maskView

UIPanGesture

然後給中間橘色的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）。

移動barImageView和maskView

我們可以得到使用目前拖動的位置（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
            
        }
        
    }

可以到github上查看本文中的「可拖動圖片遮罩層的例子」。