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>