2

I would like to implement karaoke-like progress highlight for iOS.

I know I could use NSAttributedString and highlight the text character by character. However, I would like the highlight to progress pixel by pixel, not character by character.

Any ideas?

P.S. No need for sample code, just point me to the right direction.

Here is an example:

Example

Rudolf Adamkovič
  • 31,030
  • 13
  • 103
  • 118

2 Answers2

2

I can't think of any automatic way to do that. There would be several problems to solve. It would be pretty hard, I think.

The hardest would probably be figuring out the pixel position of each word so you can pace the coloring to match the timing within the music. With text and attributed layout, you could probably get the text engine to give you the boundaries of each word and then apply the color attribute to each word as it's spoken/sung. You'd have to have data about the time offset for the beginning and end of each word's being sung.

You might have to use Core Text to get layout information about the bounding rectangles of each word.

Once you get that you could build a path (UIBezierPath or CGPath; they're pretty interchangeable) that follows the flow of the text, and then install that path in to a shape layer. You could then make the text transparent, make the shape layer a colored background that shows through, and animate the shape layer's strokeStart and/or strokeEnd properties to make it fill the text. You might need to do it word by word with a short animation that interpolates between one word and the next to get the timing right.

Duncan C
  • 128,072
  • 22
  • 173
  • 272
  • I like the idea of using paths. Maybe I could just convert the text to a path, invert it and use it as a mask. Then I would grow a simple rectangular view behind. Thank you for your help, I really appreciate it. – Rudolf Adamkovič Mar 11 '15 at 10:39
  • I doubt if making the text into a path directly would give you a smooth painting of the text in a line. The path would be a series of small, complex closed sub-paths, one for each character. – Duncan C Mar 11 '15 at 11:16
0

You probably want to have a look at 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)

There are plenty of answers for alternative, perhaps simpler answers, for example character by character or word-by-word, which may be easier to implement.

Community
  • 1
  • 1
Henri Normak
  • 4,695
  • 2
  • 23
  • 33