音乐播放器歌词的逐字渲染效果

最新推荐文章于 2022-06-04 18:39:40 发布
最新推荐文章于 2022-06-04 18:39:40 发布
阅读量3.9k 收藏 17
点赞数 3
分类专栏： View绘制 文章标签： android 播放器 歌词 逐字渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mwping1324/article/details/46551131
版权
本文介绍如何在Android应用中实现音乐播放器歌词的逐字渲染效果，包括逐字染色、歌词居中和逐行上移的关键点。通过Canvas的clipRect方法实现染色效果，通过计算画布高度和字体高度使歌词居中，利用ValueAnimator动画实现歌词上移动画。

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

受到Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器的启发，决定用这个来仿制大多数音乐播放器的逐字染色效果，效果图如下：

效果图

关键点剖析一：逐字染色效果

关键代码如下：

public boolean clipRect(int left, int top, int right, int bottom)

这是Canvas的clipRect方法，这个方法可以理解为要在整个画布上剪切一块矩形来绘制内容，此矩形以外的内容全部不绘制，也就是形成了上图的断层效果。其中left，top，right，bottom分别是左，上，右，下四个端点，right也就是效果图上的断层位置。

实现染色效果的思路是，用clipRect将一行文字剪切成两部分，前半部分用绿色，后边部分用黑色，根据进度的变化

最低0.47元/天 解锁文章
android 逐字歌词,Android实现文字逐字显示出来
weixin_32541333的博客
05-25 698
先上Android实现文字逐字显示出来效果图，供大家参考，具体内容如下可以采用自定义TextView的方式去实现，也可才用定时更新文字显示，思路是让TextView每隔一秒显示以一个字符串(并非每一秒多出来一个汉字)，那么就简单了，可以开启一个线程，那么线程主要方法如下：public static void startTv(final int n) {new Thread(new Runnable...
[Angular实战网易云]——15、歌词渲染
虽菜但瘾
01-01 618
歌词 歌词初始化 播放面板左侧展示歌单歌曲，右侧展示当前歌曲歌词，并且实现和左侧相通的滚动条。因此要根据ID获取当前歌曲歌词。 song.service.ts // 根据ID获取歌曲歌词 getLyric (id: number): Observable<Lyric> { const params = new HttpParams().set('id', id.toString()); return this.http.get(this.uri
Android视频滚动字幕逐字显示控件（类似K歌歌词逐字播放效果）
11-29
Android视频字幕滚动逐字显示效果控件，视频字幕逐字滚动显示效果,类似K歌歌词逐字播放效果，最近几年视频越来越火爆，大家对视频对字幕也要求比较高，很多需求类似K歌的歌词播放效果，也就是字幕逐字播放显示效果，字幕滚动效果。
Android 实现歌词文字逐渐高亮效果
qq_41740162的博客
06-04 776
Canvas是可以是有多层绘制效果组成的,我们可以现在底层绘制我们的基础文字效果,然后再上层绘制我们的高亮效果
酷狗音乐逐字匹配歌词是如何做到的
latun4212的博客
01-01 3443
想酷狗播放器那样逐字匹配歌词是如何做到的，碰到这个问题了，查了好长时间，都没什么资料，感觉很棘手啊，有会的大神们，请指导指导
android 歌词逐渐高亮,Android--MediaPlayer音乐播放器歌词随时间高亮显示
weixin_29188759的博客
05-26 277
package com.mrzhu.hightlight;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.text.Spannable;impor...
高仿酷狗音乐歌词逐字播放
04-05
接下来，动画是实现逐字渲染效果的关键。在iOS上，我们可以使用Core Animation框架来创建动画效果。LYPlayLyric可能采用了CAAnimation或者UIView动画来实现歌词字幕的动态展示。这包括设置动画的持续时间、延迟、...
玩转前端-歌词滚动（html、js、css）
最新发布
01-12
我们可以监听音乐播放器的`timeupdate`事件，根据当前播放时间计算出对应的歌词位置，然后用JavaScript修改容器的`transform`属性。这里可能需要用到`requestAnimationFrame`来实现平滑的滚动效果： ```javascript ...
html5音乐背景歌词滚动,html如何制作滚动歌词
weixin_39717598的博客
06-03 2037
html制作滚动歌词的方法：首先在标签里面写好编码格式，引入css样式和jQuery；然后放置播放器，代码为【】。本教程操作环境：windows7系统、html5版，DELL G3电脑。html制作滚动歌词的方法：首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨就命名为musicplay.css，js的话我们...
酷狗桌面歌词效果
10-09
通常，音乐播放器会解析歌曲的元数据，包括歌曲的艺术家、专辑、歌词等信息。歌词文件通常采用LRC格式，这是一种包含了时间戳的文本文件，指示了歌词何时出现。酷狗音乐会读取这些时间戳，然后在对应的时间点将歌词...
android krc 歌词逐字同步显示
09-11
openkrc是android手机歌词同步显示应用 功能： 1.krc歌词解密、解压、解析 2.歌词逐字同步显示 demo使用说明： 1.将apk安装到手机 2.在sd卡新建openkrc文件夹，并将openkrc_下的文件拷贝到openkrc文件夹 3.运行app 代码说明 1.参考了openlrc,并结合csdn上某应用开发 2.代码内有详细说明 3.有任何问题或者建议或者优化，请email:sjz6578@163.com
Android实现歌词渐变色和进度的效果
01-20
要用TextView使用渐变色，那我们就必须要了解LinearGradient（线性渐变）的用法。 LinearGradient的参数解释 LinearGradient也称作线性渲染，LinearGradient的作用是实现某一区域内颜色的线性渐变效果，看源码你就知道他是shader的子类。 它有两个构造函数 public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile) public LinearGradient (float x0, f
android shader线性渲染（类似与歌词逐字同步）
05-08
用android shader线性渲染实现类似与歌词逐字变色同步的效果
android 音乐播放歌词高亮自动滚动，歌词换行等功能完美解决方案
09-14
歌词滚动项目完美解决方案 功能： 1、自动加载MP3文件和歌词文件，支持assets和SD卡加载文件， 2、准确读出MP3文件的总长时间； 3、播放MP3文件，歌词高亮，自动滚动歌词； 4、支持点击播放，点击某行歌词则播放该行MP3对于音频内容； 5、支持seekbar 拖动播放，则歌词文件自动跳转到对于节点； 6、支持文字歌词换行、歌词大小自定义、歌词颜色自定义； 7、定制滚动模式，逐行滚动或者逐页滚动；
Android实现文字逐字显示出来
08-30
主要为大家详细介绍了Android实现文字逐字显示出来效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
OC-类似歌词字体颜色逐字变化的实现方法
lyz0925的博客
11-01 649
预期实效果图如下： 如上图所示，文字的颜色会根据时间的移动，逐字变成绿色。 实现方法： （1）调用方法： 　　用void UIRectFillUsingBlendMode(CGRect rect, CGBlendMode blendMode) 这个方法来实现 （2）实现逻辑: 　　自定义Label，通过label的drawRect：方法 获取Label的图...
android音乐播放器开发 SweetMusicPlayer 智能匹配本地歌词
热门推荐
huweigoodboy的专栏
10-08 1万+
上一篇写了使用MediaPlayer播放音乐，http://blog.csdn.net/huweigoodboy/article/details/39861539，现在来将一下加载本地歌词。好了，还是用那张图。 一，从内存卡上匹配歌词 将会从以下路径匹配 1)  SweetMusicPlayer/Lyrics/ 2)  歌曲同级目录下 3)  歌曲父级目录/lryics(Lryi
5.10 对标准歌词数据的解析，歌词渲染过程概述，transitionDuration有单位包括0ms，
qq_40196738的博客
05-11 423
1、首先要安装ustbhuangyi提供的第三方库 lyric-parser
Android中歌词显示的实现
entalent的专栏
05-03 7555
之前想写一个音乐播放器，但是一直不明白歌词应该怎么显示。 用UI Automator观察了一下各大音乐播放器，发现QQ音乐和百度音乐是在ScrollView里显示歌词。不清楚ScrollView里面具体是什么，都支持滑动到某个位置之后跳转播放 Flyme 4自带音乐是在ListView里显示，内部嵌套了多个TextView，一行一行显示歌词，支持滑动到某个位置之后跳转到该位置播放（魅族的UI做
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值