Question

我正在尝试创建一个类似卡拉OK的应用程序，但我遇到了一个问题。

我有一首歌作为mp3和UITextView中显示的相应歌词。我想突出/强调（或类似这样）从该mp3文件中听到的单词。我有相应的每个单词的时间（startTime，endTime，duration），但我不知道如何突出显示它们。

我搜索过Stack Overflow，但是已经发布的问题都没有解决我的问题。

我已经看到UITextView可能不适合我的要求，但我不知道还有什么可以使用。

我在WWDC 2011上看过类似的内容：核心动画“Bouncing Ball”演示，但我无法实现它。

请帮我找到办法。

Answer 1

我认为你有两种选择：

1。核心文本属性

使用Core Text，您可以为单词加下划线并为其应用许多其他装饰。以下是加下文字的示例：

//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];

现在这适用于下划线文字，但我不确定如何在歌词进展的同时为下划线设置动画。

2。自定义UIView下划线

现在你的第二个选择是创建一个子类UIView的自定义下划线类。这很容易制作动画。你甚至不必为下划线创建一个单独的类（虽然我推荐它）;您可以创建一个UIView，并使用以下动画在单词之间移动它：

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"];

Answer 2

我发现最简单的方法是使用uiwebview，以html格式插入文本并使用javascript下划线/突出显示...希望对每个想要这样做的人都有帮助：）

iOS中突出显示的文字（卡拉OK应用）

2 个答案:

1。核心文本属性

2。自定义UIView下划线