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; 
}]; 

我没有试过这个，但希望你有想法。