iOS中突出显示的文本(类似于应用程序的卡拉OK)

我正在尝试创build类似卡拉OK的应用程序,但是我面临一个问题。

我有一首歌曲作为一个MP3,并在UITextView中显示相应的歌词。 我想突出显示/下划线(或类似的东西)从那个MP3文件听到的话。 我有相应的时间为每个单词(startTime,endTime,持续时间),但我不知道如何让他们突出显示。

我已经search堆栈溢出,但没有已经发布的问题解决了我的问题。

我已经看到,UITextView可能不适合我的要求,但我不知道还有什么其他的用途。

我曾经在WWDC 2011上看到类似这样的东西:一个核心animation“弹跳球”演示,但是我无法实现它。

请帮我找一个方法来做到这一点。

正如我所看到的,你有两个select:

1.核心文本属性

使用核心文本,你可以强调文字,并应用许多其他装饰品。 下面是一个加下划线文字的例子:

//Create a font CTFontRef sysUIFont = CTFontCreateUIFontForLanguage(kCTFontSystemFontType, 24.0, NULL); //Create a string NSString *aString = @"Random text"; //Choose the color CGColorRef color = [UIColor blueColor].CGColor; //Single underline NSNumber *underline = [NSNumber numberWithInt:kCTUnderlineStyleSingle]; //Pack the attributes into a dictionary NSDictionary *attributesDict = [NSDictionary dictionaryWithObjectsAndKeys: (id)sysUIFont, (id)kCTFontAttributeName, color, (id)kCTForegroundColorAttributeName, underline, (id)kCTUnderlineStyleAttributeName, nil]; //Make the attributed string NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:string attributes:attributesDict]; 

现在,这可以用于强调文本,但是我不确定如何根据歌词进度来animation逐字逐句移动下划线。


2.自定义UIView下划线

现在你的第二个select是创build一个UIView子类的自定义下划线类。 这将很容易生动。 你甚至不必为下划线创build一个单独的类(尽pipe我推荐它); 你可以创build一个UIView,并使用如下所示的animation为每个单词添加animation:

 CABasicAnimation *underlineMove = [CABasicAnimation animationWithKeyPath:@"position"]; underlineMove.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; endPosition = CGPointMake((float)nextWord.x, (float)nextWord.y); underlineMove.toValue = [NSValue valueWithCGPoint:endPosition]; underlineMove.duration = currentWord.duration; [underlineView addAnimation:underlineMove forKey:@"animation"]; 

我发现最简单的方法是使用uiwebview,以html格式插入文本,并使用javascript下划线/突出显示它…希望它可以帮助所有想要这样做的人:)