公司做的一款教育App中,有个BookReading模块是孩子用来学习英语,里面又有一个子模块Listen用来播放句子,产品的需求是要求单词跟随着句子的播放而高亮,效果如下;GitHubDemo地址下载,这种需求之前没做过,网上搜索的也没有资料(有的也是歌词的高亮),所以花费了点时间,现在趁闲暇时间写了个小小的demo,和大家分享,整个代码写的比较基础,有相似需求的可以借鉴,不懂的地方欢迎相互交流
整体思路
分析服务器提供的json数据格式,demo中即为lrc.json,知道每个单词都有读的对应的开始时间
其中我定义了一个var wordRanges = [NSRange]()
,用来存储每个单词的Range,用来匹配相应单词的高亮。1
2
3
4
5
6let 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)
}使用CADisplayLink添加到mainRunloop中,来实现不停的重绘UI工作,相比于定时器精确度更高
1
2
3
4
5
6private 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
}
代码实现
1 | func displayWord() { |