how can I animate a CAlayer's bounds to progressively reveal an image?

Question

For certain reasons, I'm trying to avoid using a CAScrollLayer to do this. The effect I'm going after is to progressively reveal (from bottom to top) a CALayer's content (a png I previously loaded in). So I thought about doing this:

    layer.anchorPoint = CGPointMake(.5, 1);
    CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"bounds.size.height"];
    a.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    a.fillMode = kCAFillModeBoth;
    a.removedOnCompletion = NO;
    a.duration = 1;
    a.fromValue = [NSNumber numberWithFloat:0.];
    a.toValue = [NSNumber numberWithFloat:layer.bounds.size.height];
    [layer addAnimation:a forKey:nil];

The problem with this is you can tell the layer's content is scaled with the bounds. I was trying for the bounds to change but the content to stay always the original size, so that effectively the bounds clip the image and as I increase bounds.height, the image "Reveals" itself.

Any ideas as to how to pull it off or what might I be missing?

Answer 1

Ok I got it to work, but I basically had to update the layer's frame too, to reflect the change in anchor point:

  [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];
  layer.contentsGravity = kCAGravityTop;
  layer.masksToBounds = YES;
  layer.anchorPoint = CGPointMake(.5, 1);
  CGRect newFrame = layer.frame;
  newFrame.origin.y += newFrame.size.height / 2;
  layer.frame = newFrame;
  [CATransaction setValue:(id)kCFBooleanFalse forKey:kCATransactionDisableActions];

  a.toValue = [NSNumber numberWithFloat:layer.bounds.size.height];
  [layer addAnimation:a forKey:nil];

Answer 2

"Dad" has the right answer.

You want to create a CAShapeLayer, and install that as the mask on your layer.

You create a CGPath that is just a rectangle and install that path into the shape layer. The contents of the path determine what areas of the masked layer show up. If the path is a triangle in the middle of the layer, then only the triangle appears.

You then create an animation that animates the path.

To reveal your image from the bottom, you'd set up a path that was a 0 height rectangle at the bottom of the layer, and then you'd create a CAAnimation where the toValue is the same rectangle with a hight of the full layer you want to reveal. The system would generate an animation that reveals the image in a sweep.

You can use this same technique to achieve all kinds of cool effects, like barn doors, venetian blinds, "iris wipes", etc.

Answer 3

What if you changed the clipping mask instead? (or use a mask layer).

Answer 4

您可以在目标图像上放置另一个图像，并将其像舞台幕布一样向上移动。