iOS 类似卡拉 OK 的进度亮点

Karaoke-like progress highlight for iOS

我想为 iOS 实现类似卡拉 OK 的进度突出显示。

我知道我可以使用 NSAttributedString 并逐字符突出显示文本。但是,我希望突出显示逐个像素地进行,而不是逐个字符地进行。

有什么想法吗?

P.S。不需要示例代码,只需指出正确的方向即可。

这是一个例子:

你可能想看看 Core Text, which is the lower level framework used for laying out text, using this you can obtain necessary paths that you need to render said effect (I suggest starting from answers similar to this)

有很多可供选择的答案,也许更简单的答案,例如 character by character or word-by-word,这可能更容易实现。

我想不出有什么自动方法可以做到这一点。会有几个问题需要解决。我想这会很难。

最难的可能是弄清楚每个单词的像素位置,这样您就可以调整着色速度以匹配音乐中的时间。使用文本和属性布局,您可能会让文本引擎为您提供每个单词的边界,然后将颜色属性应用于每个单词,因为它是 spoken/sung。你必须有关于每个单词被唱的开始和结束的时间偏移的数据。

您可能必须使用 Core Text 来获取有关每个单词的边界矩形的布局信息。

一旦你明白了,你就可以构建一个路径(UIBezierPath 或 CGPath;它们可以互换)来跟随文本的流动,然后将该路径安装到形状层中。然后,您可以使文本透明,使形状图层成为透明显示的彩色背景,并为形状图层的 strokeStart and/or strokeEnd 属性设置动画以使其填充文本。您可能需要一个字一个字地做,并在一个字和下一个字之间插入一个简短的动画,以确保时间正确。