高仿酷狗音乐的卡拉OK的字幕效果

本文详细介绍了如何使用Objective-C实现类似酷狗音乐的歌词滚动显示效果,通过创建UIScrollView和定时器配合实现歌词逐行展示,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原创,转载请注明:http://blog.youkuaiyun.com/wang9834664/article/details/8441043

最近在用酷狗音乐听音乐的时候发现字幕效果不错,手痒也试下能不能做出这种效果

先是参考了优快云资源中的例子,网址如下,顺便吐槽下分真高(10分):

http://download.youkuaiyun.com/detail/huhouge/3563401

该例子是用Quartz 2D写的,但是效果不是酷狗的效果,而且背景色无法是透明的,局限性太强。

琢磨了一下午终于让我找出一个方案可以跟酷狗音乐的效果一样

实现原理很简单,步骤如下:

        1、创建一个UIScrollView然后一行一行的添加歌词,每行添加一个UIView,再给UIView里边添加一个UILabel用于放歌词

        2、在播放歌词时用一个行高大小的UIScrollView里边放入UILabel(另一种颜色的单行歌词),

              然后用定时器不断刷新UIScrollView的宽度,这样里边歌词会慢慢的展示出来盖在之前歌词的上面

效果如图:


例子代码在如下位置,自己下去,里边有BUG懒得调试了

http://download.youkuaiyun.com/detail/wang9834664/4931679


本来在做项目,看到酷我音乐盒的歌词显示挺有趣的,模仿做了一个不完整的。 (只有滚动显示,没有节奏显示)。 原理: (1)定义一个派生自CStatic类的CKaraokeLyricCtrl类(歌词控件),自绘制风格 ; (2)准备一个背景位图(保存在CKaraokeLyricCtrl::m_dcBK中); (3)设置两个计数器(ID分别为1和2),启动自绘制,1用来显示节奏(未实现,只 有框架),2用来滚动歌词; (4)自绘制函数中,将绘制的滚动歌词和背景位图混合,然后输出到屏幕上。滚动 歌词的绘制使用GDI+的Graphics::DrawString函数,歌词文本的大小、位置、字体和 透明度均自动计算和变化,模仿酷我音乐盒的形式。 以上功能均封闭实现在CKaraokeLyricCtrl类中。该类可以直接使用(见下边的使用步骤)。 使用步骤: (1)CKaraokeLyric::InitInstance中启动GDI+; (2)在CKaraokeLyricView::OnInitialUpdate中,创建歌词控件 (CKaraokeLyricCtrl类),其大小和CKaraokeLyricView视图相同,即覆盖了后者; (3)在菜单项响应中,使用CKaraokeLyricCtrl::ReadLyric读取歌词文件,再使用 CKaraokeLyricCtrl::Start即可启动歌词的滚动显示 未实现部分:(歌词的节拍显示) 虽然没有实现,但思路大致是:在后台先用另外一种颜色绘制当前突出显示的歌词(即字体最大的一行歌词),根据歌曲节奏,将还未唱出部分全部涂黑,然后和屏幕上的当前行突出歌词进行混合。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值