iOS 在图像上滑动图像，露出下面的图像。 (A-la jQuery.slide())

Question

我正在尝试做以下事情 -

我有同一张图片的两个版本，一个是彩色的，一个是黑白的。我希望 B&W 能够“向上滑动”以显示其下方的那个。

我尝试设置高度和框架，但无法让它按我想要的方式工作。

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

有什么想法吗？ :)

Answer 1

好的，这是在灰色视图上使用蒙版的另一种方法。我实际上用 blueView 和 grayView 对此进行了测试，其中灰色覆盖了蓝色。在灰色层上放一个蒙版层，使灰色层可见。现在动画蒙版远离灰色层，使灰色层消失而不移动它，蓝色显示灰色消失的地方。

如果您想对此进行试验，请在 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，使黑白图像位于彩色图像之上，彩色图像完全被黑白图像覆盖（隐藏）。

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

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

bwImage.clipsToBounds = YES;

最后对 bwImage 边界中的高度进行动画处理，使其高度缩小到 0，剪裁黑白图像并显示其背后的彩色图像。像这样的：

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

我没有尝试过，但希望你能明白。