Timing animation in Ios development - ios

Question

I'm looking for advice about how best to implement a Karaoke text effect to an IOS app. I'm new to IOS so am not familiar with all the various animation apis and libraries and am hoping that I can save some time if I am pointed in the right direction of what libraries to study.
In Javascript I would have used an array with the various words and timings of the audio track, and setTimeout to write the next element in the array to a div on the page. I did consider using this approach in a UIWebView but after some quick tests with UIWebview I wasn't really happy with how smooth it looked.
I did come across one very simple animation tutorial that loops through an array of images but it has a uniform animation duration which in my use case would not work, as the length of time the words needs to display on the screen will vary according to the audio. Here is the sample code that I was looking at.
NSArray *imageNames = #[#"win_1.png", #"win_2.png", #"win_3.png", #"win_4.png",
#"win_5.png", #"win_6.png", #"win_7.png", #"win_8.png",
#"win_9.png", #"win_10.png", #"win_11.png", #"win_12.png",
#"win_13.png", #"win_14.png", #"win_15.png", #"win_16.png"];
NSMutableArray *images = [[NSMutableArray alloc]init];
for (int i= 0; i < imageNames.count; i++) {
[images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
}
UIImageView *animationImageView = [[UIImageView alloc] initWithFrame: CGRectMake(60,95, 86, 193)];
animationImageView.animationImages = images;
animationImageView.animationDuration = 0.5;
[self.view addSubview:animationImageView];
[animationImageView startAnimating];
UIImageView *slowAnimationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(160, 95, 86, 193)];
slowAnimationImageView.animationImages = images;
slowAnimationImageView.animationDuration = 5;
[self.view addSubview:slowAnimationImageView];
[slowAnimationImageView startAnimating];
And I found that tutorial here: http://www.appcoda.com/ios-programming-animation-uiimageview/
thanks in advance for any suggestions of which approach is best to take.

Answer 1

So, I have already implemented what you describe and I can tell you that CoreText is the API you need to use. Only via CoreText rendering will you be able to render specific word portions in different colors and apply the color changes at specific times. But, the bad news is that this API is not really easy to use. You can find working example code in the files MutableAttrString.m and AVOfflineComposition.m at the following github project link github. The minimum code you would need is in the MutableAttrString.m file, it shows how to use CoreText to properly implement the logic you describe. You could try to roll your own solution with animated bitmaps, but the CoreText approach just renders text so it is way better for many reasons.