浅谈动感歌词-歌词显示篇

1引言

经过分析篇、生成篇和解析篇之后,相信大家对动感歌词都已经不再陌生了,现在最重要的就是,动感歌词怎样显示的问题,这里就不再介绍java swing上面怎样显示了,因为在生成篇,已经做了一些简单的介绍,这一篇着重说一下动感歌词在android上面怎样显示。

2显示

关于歌词的平滑滚动,之前一直都是用android Scroller来滚动,发现在歌词滑动快进方面,一直都实现不了,能力有限。幸好,发现了一个帖子,这个帖子真是帮了大忙,这里先贴一下,他的博客,我强烈推荐大家看一下他的博客,他说得比较详细清楚,我这里就简单说一下:

自定义View强势来袭,用自定义View实现歌词显示控件下篇之自定义LyricView的实现

在这里,我参考了他的博客和代码,对自己的乐乐音乐播放器进行了重组,在它的基础上实现歌词的平滑动和快速滑动。

这里附上我实现的效果图

2.1动感歌词API

由图可知,Graphics2D在绘画文本时,先画默认颜色的歌词文本,再设置clip层的长度宽度,然后再绘画【高亮】歌词文本,只要我们不断地修改clip层的宽度,就是我们想要的动感歌词效果了。

部分代码:

2.2动感歌词显示原理

1.通过当前的播放时间获取当前歌词所在的行索引(lIndex)

2.通过行索引(lIndex)获取当前行的歌词LyricsLineInfo

3.通过当前的行索引(lIndex)和当前的时间,获取当前行播放的【字】索引、该【字】对应的持续时间T

4.通过paint获取歌词【字】的宽度S,计算出平均速度:V = S/T

5.根据当前时间获取在该【字】的持续时间内已播放的时间:T1

6.计算clip层的长度L = V * T1

部分代码如下:

获取【字】内的播放进度

获取已播放的长度

2.3歌词平缓移动

1.自定义View和使用ValueAnimator动画实现每行歌词的平滑动效果

2.移动距离offsetY= 新行号 * (字体高度 + 空行高度) - 旧行号 * (字体高度 + 空行高度),个人感觉这个比较重要,因为这句,将移动的位移和歌词的行号关联了起来,为后面快速滑动歌词并判断滑动后歌词的位置,提供了条件。

3.为了让歌词歌词居中显示,所以在绘画歌词时,居中的歌词要减去offsetY的大小。

部分代码如下:

2.4歌词快进

重写onTouchEvent事件,VelocityTracker类和ValueAnimator组合使用,来计算手势的速度,然后根据手势速度计算歌词滚动的位置。

2.5歌词换行

这里,我实现的方式比较简陋,就是将从歌词文件解析出来的歌词集合,根据当前的视图大小和字体大小,进行重组,得到一个新的歌词集合,这样保证了可以在不改变歌词实现思路的情况下,实现歌词的换行,不过这方法对歌词的要求比较高,就是歌词文件要精确到【字】,这样子一行歌词因为字体大小分隔成两行歌词时,因为每个【字】都有持续的时间,这样可以轻松地生成一行新的歌词。

部分代码如下:

2.6歌词字体缩放

只要就是将当前的滚动位置offsetY设置为当前行,然后修改字体的大小,再重新绘画一下view,即可。

部分代码如下:

3参考

自定义View强势来袭,用自定义View实现歌词显示控件下篇之自定义LyricView的实现

卡拉OK歌词实现方式

4源码

乐乐音乐-android版本

5最后

希望歌词分析篇、生成篇、解析篇和显示篇对一些想了解动感歌词的读者有帮助。如有侵权,麻烦告知。

最后,没有最后了。

时间: 2024-10-26 14:19:11

浅谈动感歌词-歌词显示篇的相关文章

浅谈动感歌词-歌词生成篇

1引言 在写这生成篇时,我还是在烦恼应该是先写歌词解析篇,还是先写歌词生成篇,后来我想一想,其实还是要先有歌词文件,才有解析嘛,当然,我们也可以通过现有的歌词(krc.trc和ksc等)直接跳过这一步,直接解析歌词即可. 2制作软件 这里介绍一下<小灰熊卡拉ok字幕制作软件>,我们可以通过一些专业的制作软件,来理清和弄懂歌词的制作原理.这里先上个截图: 由图和软件制作歌词的使用教程,我们可以知道如下信息: 1.歌词以行为单位制作,逐[字]制作 2.在制作歌词时,软件似乎已经把每一行歌词的[字]

浅谈动感歌词-歌词解析篇

1引言 要解析动感歌词文件,首先就要清楚动感歌词的文件内容,当然歌词的文件内容,我们已经在分析篇的文章里面介绍过了,这里将不再做详细的介绍,当我们可以把歌词成功解析出来后,再结合歌词生成篇,一个简单的歌词格式转换工具也就出来了. 2歌词解析 歌词解析,其实就是把文件里面的标签内容.歌词时间和歌词内容解析出来,当然,为了后期拓展其它的动感歌词格式,我们这里要好好设计一番. 2.1实体类 2.1.1歌词读取器 主要用来约束动感歌词读取器要实现的方法,可用于拓展实现其它的动感歌词格式. 2.1.2歌词

浅谈ListView滑动隐藏显示ToolBar

引言 在App日益追求体验的时代,优秀的用户体验往往会使产品脱颖而出.今天我们就来介绍一种简单的滑动ListView来显示或者隐藏ToolBar的功能. 布局文件 下面我们来看一下这个主界面的布局文件.在这个布局文件中,主要是一个ListView控件和一个ToolBar控件.布局如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout 3 xmlns:android="h

浅谈编码习惯之注释篇

软件编码过程中,当注释代码时,要考虑到不仅将来维护你代码的开发人员要看,而且你自己也可能要看.用Phil Haack大师的话来说就是:"一旦一行代码显示屏幕上,你也就成了这段代码的维护者".因此,对于我们写得好(差)的注释而言,我们将是第一个受益者(受害者).以下是我个人的简单看法和平常的习惯. 1.模块注释 在一个程序模块的开始,应用注释说明模块的名字.功能.开发者和日期和版本变更历史,如下所示: /******************************************

浅谈算法和数据结构

: 一 栈和队列 http://www.cnblogs.com/yangecnu/p/Introduction-Stack-and-Queue.html 最近晚上在家里看Algorithems,4th Edition,我买的英文版,觉得这本书写的比较浅显易懂,而且“图码并茂”,趁着这次机会打算好好学习做做笔记,这样也会印象深刻,这也是写这一系列文章的原因.另外普林斯顿大学在Coursera 上也有这本书同步的公开课,还有另外一门算法分析课,这门课程的作者也是这本书的作者,两门课都挺不错的. 计算

浅谈算法和数据结构: 四 快速排序

原文:浅谈算法和数据结构: 四 快速排序 上篇文章介绍了时间复杂度为O(nlgn)的合并排序,本篇文章介绍时间复杂度同样为O(nlgn)但是排序速度比合并排序更快的快速排序(Quick Sort). 快速排序是20世纪科技领域的十大算法之一 ,他由C. A. R. Hoare于1960年提出的一种划分交换排序. 快速排序也是一种采用分治法解决问题的一个典型应用.在很多编程语言中,对数组,列表进行的非稳定排序在内部实现中都使用的是快速排序.而且快速排序在面试中经常会遇到. 本文首先介绍快速排序的思

浅谈 js 字符串 trim 方法之正则篇

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

浅谈Hibernate--入门篇

Hibernate是什么 Hibernate是一个轻量级的ORMapping框架 ORMapping原理(Object Relational Mapping)就是把对象里面的数据和数据库里面的数据,按照一定的规则进行映射的过程. ORMapping基本对应规则: 1:类跟表相对应 2:类的属性跟表的字段相对应 3:类的实例与表中具体的一条记录相对应 Hibernate的实现方式 Hibernate解决的问题: 通过上图我们也能发现,Hibernate主要用来实现Java对象和表之间的映射,除此之

浅谈CSS优先级机制(一)

初次写随笔,如果有哪个地方不足还望大神指点改正,下面我来谈谈我对于CSS优先级的了解吧. CSS优先级,通俗的理解就是你给元素等一堆属性描述,然后最后到底是哪个描述作为最终显示的效果的规则或机制(个人理解).以下我将分为几个点来谈谈优先级的确定. 1.引入方式: CSS引入的方式,我目前只知道四种:内联式.内嵌式.导入式.链接式(当然网上的说法名称不一,理解就好). 各种引入方式的用法我在这里就不再多说了.以上我所按顺序罗列的四个方式是理论上的优先级顺序,也就是说,我使用内联式引入的css代码作