iOS Recipes - Matt Drance [28]
In the following code, you can see that Core Animation uses the CATransform3D type to hold the matrix; initially, we set this to CATransform3DIdentity, which is effectively an empty matrix. We can then directly access the individual elements by referring to the element number—in this case, m24—which controls the perspective scaling of the layer. We need to use relatively small numbers here, because large numbers will create so much perspective distortion that the majority of the layer will be offscreen. Here we simply want enough distortion to give the classic vanishing point-style effect.
ScrollingCredits/Classes/PRPScrollingTextViewController.m
CATransform3D trans = CATransform3DIdentity;
trans.m24 = -0.005;
We now have the transformation matrix, but we haven’t actually applied it to anything, so we need to set up the text view that we will use for our rolling credits. The majority of this code is fairly straightforward and involves setting the properties for how we want the text view to appear, for example the font and color. We disable scrolling and editing because we do not need any user input. We also apply our transform matrix to the text view’s layer to add the perspective effect.
The most unusual part of the text view setup is that we set the contentOffset to a large negative value for the y-axis. The result is that the text is set to be well below the view but ready to scroll up the screen as the animation starts. We set the animated property to NO because we will control the scrolling manually in the viewDidAppear: method.
ScrollingCredits/Classes/PRPScrollingTextViewController.m
CGFloat size = self.view.frame.size.height;
if (size > self.view.frame.size.width) size = self.view.frame.size.width;
CGRect frame = CGRectMake(self.view.frame.size.width/2 - size/4,
size/4,
size/2,
size/4*3);
textView = [[UITextView alloc] initWithFrame:frame];
self.textView.editable = NO;
self.textView.scrollEnabled = NO;
self.textView.font = [UIFont boldSystemFontOfSize:20];
self.textView.textAlignment = UITextAlignmentCenter;
self.textView.backgroundColor = [UIColor blackColor];
self.textView.textColor = [UIColor yellowColor];
self.textView.text = self.scrollText;
[self.view addSubview:self.textView];
self.textView.layer.transform = trans;
[self.textView setContentOffset:CGPointMake(0, -240) animated:NO];
We are using the viewDidAppear: method to trigger the animation because this ensures that the animation does not start until the view is visible to the user. Because we are animating a view property, contentOffset, we can use UIView animation to scroll the text. Using the Block style of animation, which was introduced in iOS 4.0, we specify the duration directly and the UIViewAnimationOptionCurveLinear animation curve as our only option. We set the final contentOffset position we want in the animations block; this animates the text to the top of the text view. There is no easy way to calculate the correct duration of the animation to coordinate with the length of the text we want to display, so we need to rely on a little experimentation to come up with a suitable value.
ScrollingCredits/Classes/PRPScrollingTextViewController.m
[UIView animateWithDuration:35 delay:0
options:UIViewAnimationOptionCurveLinear
animations:^{[self.textView
setContentOffset:CGPointMake(0, 500)
animated:NO];}
completion:NULL];
The humorous effect that the scrolling view adds would be lost without music to accompany it. Thankfully, the setup for playing a single piece of audio is quite simple. We need to establish the path to the compressed audio file so that we can create an instance of the AVAudioPLayer class that uses it. We set the numberOfLoops to 1, which prompts the audio to play twice, and we set the player to play. We could do a lot more with the AV audio player, but to keep this example simple, we’re using the minimum amount of code we need to play the music.
ScrollingCredits/Classes/PRPScrollingTextViewController.m
NSURL *url = [NSURL fileURLWithPath:
[NSString stringWithFormat:@"%@/HeliumWars.m4a",