9

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

我有一首 mp3 歌曲和 UITextView 中显示的相应歌词。我想突出显示/下划线（或类似的东西）从该 mp3 文件中听到的单词。我对每个单词都有相应的时间（开始时间、结束时间、持续时间），但我不知道如何突出显示它们。

我在 Stack Overflow 上进行了搜索，但已经发布的问题都没有解决我的问题。

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

我在 WWDC 2011 上看到过类似的东西：一个核心动画“弹跳球”演示，但我无法实现它。

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

4

2 回答 2

7

在我看来，您有两种选择：

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"];
于 2012-09-04T20:58:00.160 回答
2

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

于 2012-09-18T09:28:43.127 回答