App-Entwicklung muss nicht staubtrocken sein. Das illustriert ein weiteres Beispiel aus unserem neuen Kochbuch iOS-Rezepte. Matt Drance und Paul Warren erklären darin, wie man seine iPhone- oder iPad-App mit einem perspektisch scrollenden Vor-, Zwischen- oder Abspann austattet, auch bekannt als „Star Wars Crawl“. Wir rufen allen jungen iOS-Padawanen ein herzliches „Möge die Macht mit euch sein!“ zu – und übergeben an die Autoren:
Obwohl das Beispiel eher spielerischer Natur ist, illustriert es einige wichtige Techniken. Die drei Elemente, die eine genauere Betrachtung wert sind, sind die Verwendung einer Transformation zur Verzerrung des Texts, der Einsatz von Core Animation, um den Text-View automatisch scrollen zu lassen, und der Einsatz des AVAudio-Frameworks zur Musikwiedergabe.
Die Arbeit mit 3-D-Transformationen kann eine Herausforderung sein, aber üblicherweise nutzen wir dazu Matrizen, mit denen wir die Transformationen über die Bibliotheksmethoden erstellen, die für uns von Core Animation definiert werden, z.B. Skalierung (CATransform3DMakeScale), Rotation (CATransform3DMakeRotation) und Translation (CATransform-3DMakeTranslation). Wir können auch direkt auf die einzelnen Elemente der Matrizen zugreifen, um einige sehr interessante Effekte zu gestalten.
Im folgenden Code können Sie sehen, dass Core Animation den Typ CATransform3D nutzt, um die Matrix festzuhalten. Anfänglich setzen wir diese auf CATransform3DIdentity, im Prinzip eine leere Matrix. Wir können dann direkt auf die einzelnen Elemente der Matrizen zugreifen, indem wir über die Elementnummer darauf verweisen. Hier verwenden wir das Element m24, das die Perspektivskalierung des Layers steuert. Die Zahl, die wir hier nutzen, muss recht klein sein, weil große Zahlen zu einer so große Verzerrung führen würden, dass der größte Teil des Layers außerhalb des Bildschirms läge. In diesem Beispiel bevorzugen wir aber eine Verzerrung, die nur so stark ist, dass wir den klassischen
Effekt eines perspektivischen Verschwindens erzielen.
ScrollingCredi ts/Classes/PRPScrolli ngTextViewController.m CATransform3D trans = CATransform3DIdentity; trans.m24 = -0.005;
Jetzt haben wir die Transformationsmatrix, aber noch nichts, worauf wir sie anwenden können. Als Nächstes müssen wir also den Text-View einrichten, den wir für unsere automatisch scrollenden Credits nutzen werden. Dieser Code ist im Wesentlichen recht einfach und kümmert sich nur darum, die Eigenschaften zu setzen, die festlegen, wie der
Text-View aussieht, beispielsweise die Schrift und die Farbe. Wir deaktivieren das Scrollen und Bearbeiten, weil wir keine Benutzereingaben benötigen. Außerdem wenden wir unsere Transformationsmatrix auf das Layer des Text-Views an, um den Perspektiveneffekt zu erzeugen.
Der ungewöhnlichste Teil der Einrichtung des Text-Views ist, dass wir contentOffset auf einen hohen negativen Wert für die y-Achse setzen. Das führt dazu, dass der Text so eingerichtet wird, dass er sich deutlich unterhalb des Views befindet, aber dazu bereit ist, auf den Bildschirm zu scrollen, sobald die Animation beginnt. Wir setzen die Eigenschaft animated auf NO, weil wir das Scrollen manuell in der Methode view-DidAppear: steuern werden.
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];
Die Animation wird in viewDidAppear: angestoßen, um sicherzustellen, dass sie erst einsetzt, wenn der View für den Benutzer sichtbar ist. Weil wir eine View-Eigenschaft, contentOffset, animieren, können wir eine UIView-Animation nutzen, um den Text zu scrollen. Wir verwenden den in iOS 4.0 eingeführten Blockstil für Animationen, geben die Dauer direkt an und setzen den Animationskurvenstil UIViewAnimationOption-CurveLinear als unsere einzige Option. Die erwünschte endgültige contentOffset-Position setzen wir im animations-Block: Das animiert den Text an den oberen Rand des Text-Views. Da es kein einfaches Verfahren gibt, zu berechnen, wie lange die Animation laufen muss, damit der gesamte Text angezeigt wird, experimentieren wir etwas herum, bis wir eine passende Lösung gefunden haben.
ScrollingCredits/Classes/PRPScrollingTextViewController.m
[UIView animateWithDuration:35 delay:0
options:UIViewAnimationOptionCurveLinear
animations:^{[self.textView
setContentOffset:CGPointMake(0, 500)
animated:NO];}
completion:NULL];
Der amüsante Effekt, den der scrollende View erzeugt, ginge ohne eine passende Begleitmusik verloren. Glücklicherweise lässt sich das Abspielen eines einzigen Audiotracks recht leicht umsetzen. Wir müssen den Pfad zur komprimierten Audiodatei einrichten, damit wir eine Instanz der Klasse AVAudioPLayer erstellen können, die diese nutzt. Wir setzen numberOfLoops auf 1, damit die Musik einmal gespielt wird, und setzen den Player auf Play. Wir könnten mit dem AV-Audioplayer noch erheblich mehr anstellen, nutzen, um dieses Beispiel einfach zu halten, aber nur das Minimum an Code, das wir benötigen, um die Musik abzuspielen.
ScrollingCredits/Classes/PRPScrollingTextViewController.m NSURL *url = [NSURL fileURLWithPath: [NSString stringWithFormat:@ "%@/HeliumWars.m4a", [[NSBundle mainBundle] resourcePath]]]; NSError *error; audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:&error]; audioPlayer.numberOfLoops = 1; [audioPlayer play];
Damit steht Ihnen jetzt eine Möglichkeit zur Verfügung, die trockeneren Seiten Ihrer App mit ein paar kleinen Schmankerln auszustatten. Es besteht sogar eine gewisse Flexibilität in Bezug darauf, wie der Text auf der Seite anzeigt wird – Sie können den Text, die Musik und die Scrollgeschwindigkeit anpassen.