Thursday, June 16th, 2011
Ever wanted to have scrolling credits for your iOS device ? Here is how to do it…
1. Take your existing photo and cut out a piece as high as your UIView and as wide as your text plus a little bit.
2. This new image will be our mask.
3. With the mask image cut out the centre so you have a rectangle top and bottom. Clone the layer and on the first layer delete the bottom rectangle, on the other layer delete the top rectangle
4. Add a layer mask to both.
5. With the layer mask selected add a black/white gradient (hold down the shift key to get a straight down gradient)
6. Your mask image is now done, add to your XCode project with the main image then the text and then the mask image on top.
7. To animate first reset the text so it’s always in the same starting position
1 2 3 4
lblCredits.transform = CGAffineTransformMakeTranslation(0, 0); CGRect frame = lblCredits.frame; frame.origin.y = 550.0; lblCredits.frame = frame;
8. Then just animate up
1 2 3 4 5 6 7 8 9
[UILabel beginAnimations:nil context:NULL]; [UILabel setAnimationDuration:30.0f]; [UILabel setAnimationCurve:UIViewAnimationCurveLinear]; [UILabel setAnimationBeginsFromCurrentState:YES]; [UILabel setAnimationDelegate:self]; [UILabel setAnimationDidStopSelector:@selector(creditsHaveEnded)]; CGAffineTransform transform = CGAffineTransformMakeTranslation(0, -1000); lblCredits.transform = transform; [UILabel commitAnimations];
9. That’s about it, dependant on how you use it you may need to cancel the animation but I’m sure you can work that out :)