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