`

Android 同步歌词滚动 唱片手势滑动 原理手记

 
阅读更多

刚才误删了一次。。。还好有个打开的页面没关掉

先上效果图


 

中间就是同步滚动歌词的部分了 现在是最简单的效果 当前播放字体是红色 其余部分为白色

右侧是一个类似Gallery效果的 可以上下拖动 选择唱片 拟3D 效果目前感觉还行

 

记录下2部分的实现原理

————————————

 

首先是歌词同步,这个很大部分都是参考了YOYOPlayer这个开源的播放器 

http://www.blogjava.net/hadeslee/archive/2008/01/11/173489.html 作者的开发手机 非常详细的关于歌词滚动的代码实现 Android上的实现基本也是一样

 

主要包括3个类 Sentence Lyric 以及LyricView

Sentence是指单个歌词对象 其中包括了歌词的开始时间,结束时间,以及歌词内容,方法包含检索当前时间是否属于该歌词,歌词的着色属性等 其中有一个非常重要的方法 用于获得偏移量

偏移量是什么呢 就是一句歌词在每次刷新的时候移动的距离 计算该距离的公式是:

(字体高度+空隙)*((当前时间-开始时间)*1.0 /(结束时间-开始时间))

即距离除以歌词播放持续的时间占的比例(乘1.0是保持浮点型)

 

Lyric类保有Sentence对象的集合 也就是一首歌的完整歌词 拥有一个List<Sentence> 里面根据播放时间顺序将每句歌词都排列好了(边解析LRC文件边排序) 也就是之后要做的简单来说就是依次取出歌词对象 显示 Lyric同时定义了如何绘制自己  也就是drawLyc方法 

画歌词的思路是 在中心位置画当前歌词(根据当前播放时间获得) 之后一次在上方画前面的部分 下方画后面的部分 当tmpY<0 表示画不下了 则停止不画 需要注意的是 这里所说的中心位置 是指屏幕中心+偏移量 得到的当前歌词绘制位置

 

LyricView就是要在布局文件中使用的控件了 这个类非常简单 只是继承View 在onDraw中将画笔和画布传给Lyric,调用其drawLyc方法来绘制自己

在代码中使用LyricView 需要为其设定Lyric 也就是画的歌词集合 以及 当前音乐播放的时间

 

————————————

 

接下来是右侧的滑动唱片

现在实现的方式将坐标都写死了 扩展移植性很差 应该需要再抽离出一层接口会更好 这里只是记录下思路

在当前画面上显示的是9张图片 比如叫做ABCDEFGHI 这里先绘制最后的两张图片A I 设置最高的透明度 尺寸 然后绘制B H。。依次类推 这样就有了一个拟3D效果

那么如何让他滚起来呢 我们将视线放到单独的张图片上 比如这里的中心图片E E到F的过程是一个线性移动的过程 也就是说只是简单的x+ y+ width,height- alpha-的过程 同样这样的模式可以应用到每一个图片上 比如这里我们设定中间过程有4帧 当第4帧时 E就到了F的位置 而D到了E的位置 此时就恢复到了初始的状态 只是每个位置上的图片变了下 变成了ZABCDEFGH 知道了这样的过程 就可以进行进一步操作了

 

根据刚才总结到的 定义了一个类似结构体的东西 其中分别是posX posY横纵坐标点alpha透明度以及width height值 比如叫做PosAlphaSize类

 

之后定义的是我们的自定义View控件 当然他自身会保有一个需要在界面上显示的图片List(只是显示的9张) 然后onDraw方法中 根据PosAlphaSize中的参数 将9张图片分别绘制在相应的位置 (先画2侧 再绘制中心图片)

 

在主界面中,有一个所有封面图片的集合 需要显示的图片就在是这个图片集合中的一个子序列 有一个当前帧的计数器(0-4) 还有一个当前显示图片序列的下标index 以确定哪些图片被显示 然后将这个图片子序列传入到自定义的View中 让其自身invalidate绘制 每一帧的具体位置都被定义了 即每帧每张图片的坐标(一个类似2维的数组,只需根据这个坐标进行绘制就好了) 当然这也是做得不好的地方 正是因为坐标写死了 导致移植性很差 不过目前先实现效果

 

最后  给这个View添加上手势动作 onTouch Gesture等等 绘制下一帧的代码主要写在onScroll和onFling方法中。

 

——————————————

总结的比较乱 只是介绍下实现的原理 代码写得很是乱 还需要再进行优化

0
0
分享到:
评论
3 楼 宝玉来了 2011-11-22  
给发个demo吧,QQ:838855199
2 楼 cookiejj2010 2011-11-05  
AndroidMarketTest1 写道
写得相当不错哈,有demo可以借来参考下吗??

代码散得七零八落了。。。 找了下还是拼不大起来 其实现在实际用的时候感觉效果还是有点不尽如人意 主要是做法比较僵硬
1 楼 AndroidMarketTest1 2011-11-03  
写得相当不错哈,有demo可以借来参考下吗??

相关推荐

    2025最新全国水利安全生产知识竞赛题库(含答案).docx

    2025最新全国水利安全生产知识竞赛题库(含答案).docx

    【雷达】非相干多视处理(CSA)Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    使用 MATLAB 的实时人脸识别考勤系统Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    elasticsearch8.17.1 docker镜像资源

    因为文件过大所以使用bz2进行了2次压缩,请解压成tar包后在上传到服务器

    基于java+ssm+mysql的校园二手交易平台 源码+数据库+论文(高分毕设项目).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql8.0 部署环境:Tomcat(建议用 7.x 或者 8.x 版本),maven 数据库工具:navicat

    iostat打印解析画图工具

    iostat打印解析画图工具

    fence-agents-compute-4.2.1-41.el7-9.6.x64-86.rpm.tar.gz

    1、文件内容:fence-agents-compute-4.2.1-41.el7_9.6.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/fence-agents-compute-4.2.1-41.el7_9.6.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

    从倾斜边缘或倾斜狭缝计算 MTFMatlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    维控HMI和PLC在各行业的应用

    PDF格式,229页,包括有环保,新能源,木工,包装等行业的应用。适用于电气自动化行业。

    dropwatch-1.4-9.el7.x64-86.rpm.tar.gz

    1、文件内容:dropwatch-1.4-9.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/dropwatch-1.4-9.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

    fence-agents-emerson-4.2.1-41.el7-9.6.x64-86.rpm.tar.gz

    1、文件内容:fence-agents-emerson-4.2.1-41.el7_9.6.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/fence-agents-emerson-4.2.1-41.el7_9.6.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

    航空发动机磨粒荷电特性研究.pdf

    航空发动机磨粒荷电特性研究.pdf

    第十一届蓝桥杯大赛个人赛校内选拔(软件类)真题

    第十一届蓝桥杯大赛个人赛校内选拔(软件类)真题全面考察了参赛选手的编程与算法能力,涵盖多个热门编程语言,为选手提供了展现自身实力的舞台。 考察范围与方向 真题在编程语言上聚焦于 C/C++、Java、Python 等主流语言。考察内容广泛,既有基础的语法运用,也涉及复杂的数据结构和算法。数据结构方面,对数组、链表、栈、队列、哈希表等的使用有不同程度的考察;算法上,动态规划、贪心算法、搜索算法等经典算法是考察重点。 题型示例与特点 在具体题型上,有数值计算类题目,例如给定条件计算特定数值,要求选手有较强的逻辑思维和数学运算能力;字符串处理类题目,如字符串匹配、替换等,考验选手对字符串操作函数的熟悉程度;还有图论与搜索类题目,像最短路径问题,需要选手掌握相应的搜索算法。 考察目的与意义 这次校内选拔真题旨在筛选出编程能力强、算法思维敏捷的选手,为后续的正式比赛储备人才。通过解答这些真题,选手能发现自身知识短板,明确学习方向。对于学校而言,能了解学生的编程水平,为教学改进提供参考。同时,这也为学生提供了与同龄人交流切磋的机会,激发他们学习编程的热情,提升解决实际问题的能力。

    一种采用耦合电感的开关电路分析.pdf

    一种采用耦合电感的开关电路分析.pdf

    rancher-active-proxy

    rancher-active-proxy

    RSSIIndoorLocation-master

    RSSIIndoorLocation-master

    【电力系统】基于主从博弈的售电商多元零售套餐设计与多级市场购电策略Matlab复现.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    exchange-bmc-os-info-1.8.18-11.el7-9.x64-86.rpm.tar.gz

    1、文件内容:exchange-bmc-os-info-1.8.18-11.el7_9.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/exchange-bmc-os-info-1.8.18-11.el7_9.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

    基于java+ssm+mysql的图书管理借阅系统 源码+数据库+论文(高分毕设项目).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql8.0 部署环境:Tomcat(建议用 7.x 或者 8.x 版本),maven 数据库工具:navicat

    docbook-style-xsl-1.78.1-3.el7.x64-86.rpm.tar.gz

    1、文件内容:docbook-style-xsl-1.78.1-3.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/docbook-style-xsl-1.78.1-3.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

Global site tag (gtag.js) - Google Analytics