Blind down animation on CALayer using a mask

I want to create a "blind down" effect on an image so the image "blinds down" and appears.

Sort of like 开发者_如何学JAVAthis JavaScript transition: https://github.com/madrobby/scriptaculous - http://madrobby.github.io/scriptaculous/effect-blinddown/

The mask is setup correctly because if I manually change it's position it hides and reveals the image behind it, but it doesn't animate! It just ends up in the animates final position and you never see it actual blind.

Please help! Maybe this isn't the best way to achieve a blind down effect?

// 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];

---

Another thing to try. Check out CALayer's contentRect property. It acts as a 'viewport' over the layer. To animate it start contentRect with a shrunk down value then set it to go full size. Core Animation takes care of animating it for you.

Not sure if it's exactly the effect you're looking for, but there are a few things to keep in mind:

• contentsRect is in 'unit coordinates' meaning the values are floats between 0.0 and 1.0 (with 0.0 meaning show nothing and 1.0 means show everything).

• Layer coordinates are flipped from UIView coordinates. So 0.0, 0.0, is bottom left and values go up and to the right. You'll have to make some adjustments to get the right effect.

• Depending on what's inside the blinds, you may have to set masksToBounds=YES.