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

Question

我正在尝试做以下事情 -

我有两个版本的相同图像，一个是彩色的，一个是黑色和白色。我希望B＆amp; 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，使得B＆amp; W图像位于彩色图像的顶部，其中彩色图像被B＆amp; W图像完全覆盖（隐藏）。

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

只有B＆amp; W视图可见。现在在B＆amp; W视图上设置clipsToBounds：

bwImage.clipsToBounds = YES;

最后在bwImage的边界中设置高度的动画，使其高度缩小到0，剪切B＆amp; W图像并显示其后面的彩色图像。像这样：

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

我没试过这个，但希望你明白了。