objective-c - 使用 mask 在 CALayer 上遮挡动画

Question

我想在图像上创建“遮蔽”效果，以便图像“遮蔽”并出现。

有点像这个 JavaScript 转换: https://github.com/madrobby/scriptaculous - http://madrobby.github.io/scriptaculous/effect-blinddown/

蒙版设置正确，因为如果我手动更改它的位置，它会隐藏和显示它后面的图像，但它不会动画!它只是在动画的最终位置结束，你永远看不到它真正的盲目。

求助!也许这不是实现盲目效果的最佳方式？

// create a new layer
CALayer *numberLayer = [[CALayer alloc] init];

// render the number "7" on the layer
UIImage *image = [UIImage imageNamed:@"number-7.png"];
numberLayer.contents = (id) [image CGImage];
numberLayer.bounds = CGRectMake(0, 0, image.size.width, image.size.height); // width and height are 50
numberLayer.position = position;

// create a new mask that is 50x50 the size of the image
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
CGMutablePathRef path = CGPathCreateMutable();

CGPathAddRect(path, nil, CGRectMake(0, 0, 50, 50));

[maskLayer setPath:path];
[maskLayer setFillColor:[[UIColor whiteColor] CGColor]];

[theLayer setMask:maskLayer];

[maskLayer setPosition:CGPointMake(0, 0)]; // place the mask over the image

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:3.0];
[maskLayer setPosition:CGPointMake(0, 50)]; // slide mask off the image
// this should shift the blind away in an animation
// but it doesn't animate
[UIView commitAnimations]; 
[maskLayer release];

[boardLayer addSublayer:numberLayer];
[numberLayer release];

Answer 1

另一个尝试。查看 CALayer 的 contentRect 属性。它充当图层上的“视口(viewport)”。要为其设置动画，请使用缩小的值启动 contentRect，然后将其设置为全尺寸。 Core Animation 负责为您制作动画。

不确定这是否正是您要寻找的效果，但有几点需要牢记:

• contentsRect 位于“单位坐标”中，表示值是介于 0.0 和 1.0 之间的 float (0.0 表示什么都不显示，1.0 表示显示所有内容)。

• 图层坐标从 UIView 坐标翻转过来。所以 0.0、0.0 是左下角，值向上和向右。您必须进行一些调整才能获得正确的效果。

• 根据百叶窗内的内容，您可能必须设置 masksToBounds=YES。