changing the digital world one bit at a time...

Blants (noun) the rants of a blogger

Scrolling credits on iOS – how to create.

June 16, 2011 by The Man

Ever wanted to have scrolling credits for your iOS device ? Here is how to do it…

Scrolling Credits from Brian Slack on Vimeo.

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

lblCredits.transform = CGAffineTransformMakeTranslation(0, 0);     
CGRect frame = lblCredits.frame;
frame.origin.y = 550.0;
lblCredits.frame = frame;

8. Then just animate up

[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 🙂