9

カラオケのようなアプリケーションを作成しようとしていますが、問題が発生しています。

私はmp3として曲を持っており、対応する歌詞がUITextViewに表示されています。そのmp3ファイルから聞こえる単語を強調表示/下線を引きたい（またはこのようなもの）。各単語に対応するタイミング（startTime、endTime、duration）がありますが、それらを強調表示する方法がわかりません。

Stack Overflowで検索しましたが、すでに投稿されている質問のどれも私の問題を解決しませんでした。

UITextViewが私の要件に不適切である可能性があることを確認しましたが、他に何を使用すればよいかわかりません。

WWDC 2011でこのようなものが発表されたのを見たことがあります。CoreAnimationの「ボールの跳ね返り」デモですが、それを実装することができませんでした。

これを行う方法を見つけるのを手伝ってください。

4

2 に答える 2

7

私が見ているように、2つのオプションがあります。

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アンダースコア

次に、2番目のオプションは、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 に答える