swift实现的单词高亮

公司做的一款教育App中，有个BookReading模块是孩子用来学习英语，里面又有一个子模块Listen用来播放句子，产品的需求是要求单词跟随着句子的播放而高亮，效果如下；GitHubDemo地址下载，这种需求之前没做过，网上搜索的也没有资料（有的也是歌词的高亮），所以花费了点时间，现在趁闲暇时间写了个小小的demo，和大家分享，整个代码写的比较基础，有相似需求的可以借鉴，不懂的地方欢迎相互交流

wordHilightGif.gif

整体思路

1、根据服务器提供的json数据格式，demo中即为lrc.json，知道每个单词都有读的对应的开始时间，

lrcjson.png
其中我定义了一个var wordRanges = [NSRange]()，用来存储每个单词的Range，用来匹配相应单词的高亮。

let textStr: NSString = section!.text
        self.wordRanges.removeAll() // 在下一次添加之前，得先删除之前的
        weak var weakSelf = self
        textStr.enumerateSubstringsInRange(NSMakeRange(0, textStr.length), options: .ByWords) { (substring, substringRange, enclosingRange, bb) in
            weakSelf!.wordRanges.append(substringRange)
        }

2、使用CADisplayLink添加到mainRunloop中，来实现不停的重绘UI工作，相比于定时器精确度更高

private func setupTimer() {
        displayLink = CADisplayLink(target: self, selector: #selector(BookCollectionViewController.displayWord))
        displayLink?.addToRunLoop(NSRunLoop.mainRunLoop(), forMode: NSDefaultRunLoopMode) // mode 为 NSRunLoopCommonModes
        // 调用的频率 默认为值1，代表60Hz，即每秒刷新60次，调用每秒 displayWord() 60次，这里设置为10，代表6Hz
        displayLink?.frameInterval = 10
    }

核心代码如下：

func displayWord() {
        let cell = self.collectionView.visibleCells().first as! BookCollectionViewCell
        let indexPath = collectionView.indexPathForCell(cell)
        
        guard let page = model?.pages[(indexPath?.item)!] else {return}
        guard let section = page.sections.first else {return}
        var i = 0
        while true {
            let curTime = audioPlayer?.currentTime ?? 0 // 播放声音的的时间，ms
            
            guard (wordRanges.first != nil) else {break}
            
            let word = section.words[i]
            
            let curRange = wordRanges[i]
            if Int(curTime * 1000) >=  Int(word.cueStartMs) { // 拿当前播放的声音时间与json每个单词的开始读取时间相比，
                attributeStr?.addAttributes([NSForegroundColorAttributeName: UIColor.whiteColor()], range: NSMakeRange(0, attributeStr!.length))
                attributeStr?.addAttributes([NSForegroundColorAttributeName: UIColor.redColor()], range: curRange)
                cell.content.attributedText = attributeStr
            }
            
            i += 1
            
            if i >= wordRanges.count || i >= section.words.count {
                break
            }
        }
    }