ios - 适用于 iOS 的类似卡拉 OK 的进度突出显示

Question

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

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

有什么想法吗？

附言无需示例代码，只需指出正确的方向即可。

这是一个例子:

Answer 1

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

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

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

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