Blind down animation on CALayer using a mask
- by dgjones346
Hi there,
I want to create a "blind down" effect on an image so the image "blinds down" and appears.
Sort of like this JavaScript transition:
http://wiki.github.com/madrobby/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];
