Blind down animation on CALayer using a mask

Posted by dgjones346 on Stack Overflow See other posts from Stack Overflow or by dgjones346
Published on 2010-03-05T08:21:09Z Indexed on 2010/05/08 16:18 UTC
Read the original article Hit count: 770

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

© Stack Overflow or respective owner

Related posts about objective-c

Related posts about calayer