iOS在圖像上滑動圖像，顯示下面的圖像。 （A-la jQuery.slide）

Question

我試圖做以下事情 -

我有兩個版本的相同的圖像，一個彩色和一個黑色和白色。我想B & W「向上滑動」揭示它下面的一個。

我試着設置高度和框架，但無法讓它像我想要的那樣工作。

例如，這將是既UIImages其中一個是揭示了其它的組合，而不是移動：

任何想法？ :)

Answer 1

好的，這裏是在灰色視圖中使用蒙版的不同方法。我實際上用blueView和greyView測試了這個，灰色覆蓋了藍色。在灰色圖層上放置遮罩層，以使灰色圖層可見。現在將遮罩從灰色層移開，使灰色層消失而不移動，藍色顯示灰色消失的位置。

如果您想試驗一下，請在XCode中用單個視圖創建一個空項目，並將此代碼放入viewDidLoad中。我就是這樣測試的。

self.view.backgroundColor = [UIColor whiteColor]; 

UIView* blueView = [[[UIView alloc] init] autorelease]; 
blueView.backgroundColor = [UIColor blueColor]; 
blueView.frame = CGRectMake(50,50,100,100); 

UIView* grayView = [[[UIView alloc] init] autorelease]; 
grayView.backgroundColor = [UIColor grayColor]; 
grayView.frame = CGRectMake(50,50,100,100); 

[self.view addSubview:blueView]; 
[self.view addSubview:grayView]; // gray covers the blue 

// Create a mask to allow the grey view to be visible and cover up the blue view 
CALayer* mask = [CALayer layer]; 
mask.contentsScale = grayView.layer.contentsScale; // handle retina scaling 
mask.frame   = grayView.layer.bounds; 
mask.backgroundColor = [UIColor blackColor].CGColor; 
grayView.layer.mask = mask; 

// Animate the position of the mask off the grey view, as the grey becomes unmasked, 
// that part of the grey "dissappears" and is no longer covering the blue underneath 
CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"position"]; 
a.duration = 4; 
a.fromValue = [NSValue valueWithCGPoint:mask.position]; 
CGPoint newPosition = mask.position; 
newPosition.y += mask.bounds.size.height; 
a.toValue = [NSValue valueWithCGPoint:newPosition]; 
a.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 
[mask addAnimation:a forKey:@"colorize"]; // animate presentation 

mask.position = newPosition;  // update actual position 

不要忘了此行的頂部與#imports：

#import <QuartzCore/QuartzCore.h> 

Answer 2

一種方法是堆疊UIView的，使彩色圖像頂部的彩色圖像完全覆蓋（隱藏）的W圖像B & W圖像。

[self.view insertSubview:bwImage aboveSubview:colorImage]; 

只有B & W視圖可見。現在設置在B & W查看clipsToBounds：

bwImage.clipsToBounds = YES; 

最後動畫在bwImage的界限高度，使得它的高度縮小到0，剪輯在B &用黑白，揭示其背後的彩色圖像。像這樣的東西：

[UIView animateWithDuration:1.0 animations:^{ 
    CGRect b = bwImage.bounds; 
    b.size.height = 0; 
    bwImage.bounds = b; 
}]; 

我沒有試過這個，但希望你有想法。