iOS在图像上滑动图像，显示下面的图像。 （A-la jQuery.slide（））

我正在尝试做下面的事情 –

我有两个版本的相同的图像，一个彩色和一个黑色和白色。 我想让B＆W“下滑”，揭示它下面的一个。

我试图设置高度和框架，但不能像我想要的那样工作。

例如，这将是两个UIImages的组合，其中一个揭示另一个而不移动：

有任何想法吗？ 🙂

Answer 1

好的，这是在灰色视图上使用蒙版的不同方法。 我实际上用blueView和greyViewtesting了这个，灰色覆盖了蓝色。 在灰色图层上放置一个遮罩层，使灰色图层可见。 现在将遮罩从灰色层移开，使灰色层消失而不移动，蓝色显示灰色消失的位置。

如果你想试验这个，用XCode在一个视图中创build一个空的项目，并把这个代码放在viewDidLoad中。 我就是这样testing的

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，使B＆W图像位于彩色图像的顶部，彩色图像被B＆W图像完全覆盖（隐藏）。

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

只有黑白视图可见。 现在在黑白视图上设置clipsToBounds：

 bwImage.clipsToBounds = YES; 

最后在bwImage边界处设置高度，使其高度缩小到0，剪切黑白图像并显示其后的彩色图像。 像这样的东西：

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

我没有尝试过，但希望你能明白这个主意。