在裁剪過渡的圖像之間滾動

我一直在尋找一段時間，並試圖完成類似的東西。在Fifa iOS app有一個非常奇特的效果，你可以在屏幕之間滾動，每個都有不同的圖像，但滾動本身並沒有移動的圖像移動，但像它們之間的剪切線正在移動（視差效果幾個網站）。在裁剪過渡的圖像之間滾動

我的問題是：我嘗試了類似的效果，但遇到了2個障礙。蒙版圖像CGImageMaskCreate速度不夠快，無法正確剪切圖像。

我試過的是加載出現在屏幕上的3幅裁剪圖像，這意味着爲3個蒙版中的每一個創建3個graphicsContexts，爲每個蒙版蒙上圖像。然後，創建另一個緩衝區上下文，將所有完成的部分加起來（創建3次，每次裁剪後的圖像一次，然後我開始處理下一個）這很有意義，它很重，它就是這樣。

第二，我試過GPUImage library，但它也感覺非常慢，我最小化了我使用的GraphicsContext的數量。我確實在做一些非常錯誤的事情，但我不確定從哪裏開始。我找不到任何示例代碼可以做類似的調整。我決定炸燬現有的代碼我嘗試，所以我會重新開始（所以不要問我的代碼：d）

我知道scrollViewDidScroll可平滑足夠類似的東西。

來源

2014-01-21 Ehab Amer

艱難，不擁有/使用該應用程序的讀者。爲了改進您的問題，添加一系列屏幕截圖或動畫GIF或顯示您正在嘗試解決的問題的東西可能是一個好主意。 – Till

我剛剛下載了該應用程序，只是爲了找出你在說什麼，我仍然只能猜測你正在談論水平滾動時「Explore FIFA」中可見的效果。 – Till

您應該將圖像視圖剪輯/遮罩到路徑而不是圖像蒙版。然後，當您平移時，圖像不會移動，而是隻更新每個圖像視圖的剪輯/蒙版。如果要在Core Graphics中執行此操作，可以使用CGContextMoveToPoint,CGContextAddLineToPoint等創建路徑，然後使用CGContextClip進行剪輯。

如果你想這樣做的QuartzCore，你可以使用一個CAShapeLayer作爲掩模到相應的圖像視圖，給每個面具每個圖像自身的UIBezierPath：

// create path 

UIBezierPath *path = [UIBezierPath bezierPath];; 
CGPoint point = CGPointZero; 

point.x += slantOffset; 
[path moveToPoint:point]; 

point.x += self.view.bounds.size.width; 
[path addLineToPoint:point]; 

point.x -= slantOffset * 2.0; 
point.y += self.view.bounds.size.height; 
[path addLineToPoint:point]; 

point.x -= self.view.bounds.size.width; 
[path addLineToPoint:point]; 

[path closePath]; 

// create shape layer, use the path, and specify it for the mask of the image view 

CAShapeLayer *maskLayer = [CAShapeLayer layer]; 
maskLayer.path = [path CGPath]; 
self.imageView.layer.mask = maskLayer;

當你想改變掩碼（例如在您的平移手勢識別器中），您只需更新path即可獲得maskLayer。只需對任何給定時間可見的所有圖像重複此過程（例如，它看起來像這個應用程序有三個圖像一次可見）。

這足以快速跟上您的手勢識別器和/或自定義過渡。在這裏，我有三個圖像視圖，我有一個手勢識別器更新UIBezierpath爲每個三個圖像視圖的相應遮罩層。顯然，對於圖層蒙版的路徑進行相應的調整（左，中，右），但我懷疑你的想法：

enter image description here

來源

2014-01-22 01:34:56 Rob

Thnx，爲您的答案。我會盡快嘗試。但小調查。我可以使用滾動視圖而不是平移視圖來讀取偏移量來調整裁剪區域嗎？或者回調不夠頻繁？ –

yeap，做到了，只是試圖用scrollView和性能非常好。非常感謝:) –

感謝，羅布任何機會，你可以將該示例項目發佈到github什麼的？ – McCygnus

在裁剪過渡的圖像之間滾動

回答

相關問題