android实现音乐跳动效果
效果图
实现
整体的流程图如下
上面主要步骤分为3个
1、计算宽度能放下多少列的音频块。
2、计算每一列中音频块的个数
3、绘制音频块
1、计算宽度能放下多少列的音频块。
设置音频块的宽度为danceWidth,音频块横向之间的间距为danceGap,那么可以算出能放的列数:
/*** 先计算当前宽度能够放下多少个音频块*/val widthNum = (getAvailableWith() / (danceGap + danceWidth)).toInt()/*** 获取可以用的宽度*/private fun getAvailableWith() = mCanvasWidth - paddingLeft - paddingRight
2、计算每一列中音频块的个数
在算出横向能放置多少音频块后,遍历横,然后绘制列中的音频块,列中的音频块的个数跟音频的高低相关,这里实现方式是通过Visualizer这个类然后获取到mRawAudioBytes数组,
mVisualizer.setDataCaptureListener(new Visualizer.OnDataCaptureListener() {@Overridepublic void onWaveFormDataCapture(Visualizer visualizer, byte[] bytes,int samplingRate) {BaseVisualizer.this.mRawAudioBytes = bytes;invalidate();}@Overridepublic void onFftDataCapture(Visualizer visualizer, byte[] bytes,int samplingRate) {}}, Visualizer.getMaxCaptureRate() / 2, true, false);
这里设置的获取的mRawAudioBytes数组的大小是128,数组的区间范围[-128,127],计算列的时候这里做了两个比较重要的操作,第一个是怎么把mRawAudioBytes数组的值与音频的个数做映射,第二个是怎么取mRawAudioBytes数组的值。
/*** 先计算当前宽度能够放下多少个音频块*/val widthNum = (getAvailableWith() / (danceGap + danceWidth)).toInt()Log.d(TAG,"widthNum $widthNum")/*** 算出横向能放多少后,进行绘制*//*** 绘制的时候用于标记开始绘制的位置*/var lastDanceRight = paddingLeft.toFloat()if (widthNum > 0 && mRawAudioBytes != null && mRawAudioBytes.isNotEmpty())for (i in 0 until widthNum) {//先算出当前高度,然后再算这个高度能放下多少个音频块val num = (getAvailableHeight() / (danceHeight + danceGap)).toInt()val index = (mRawAudioBytes.size) * (i.toFloat() / widthNum)val b = (mRawAudioBytes[index.toInt()] + 128).toFloat() / 255fvar heightNum =(b * num).toInt()if (heightNum < miniNum) {heightNum = miniNum}if (heightNum > maxNum) {heightNum = maxNum}//拿到最顶部的高度var lastHeight = mCanvasHeight - paddingStart.toFloat()Log.d(TAG,"heightNum $heightNum lastHeight $lastHeight lastDanceRight $lastDanceRight ${mRawAudioBytes[i]} $num $b $index")lastHeight = drawItem(heightNum, lastDanceRight, lastHeight, canvas)lastDanceRight += danceWidth + danceGap}
上面做了两个映射,首先可能有0~n横,但是mRawAudioBytes大小是128,遍历横的时候对下标进行一个映射,保证获得的值是均匀的,
/**
通过这个映射得到index
*/
val index = (mRawAudioBytes.size) * (i.toFloat() / widthNum)
第二个映射,是得到了代表音频大小的mRawAudioBytes数组,现在要把这里面的值跟列的高度做一个映射,值越大高度越高,音频块就越多。
val num = (getAvailableHeight() / (danceHeight + danceGap)).toInt()
val b = (mRawAudioBytes[index.toInt()] + 128).toFloat() / 255f
var heightNum =(b * num).toInt()
上面是先得到列最多能展示多少音频块,再根据mRawAudioBytes的值来算出当前列展示多少个音频块。这一步也叫归一化,区间映射。
3、绘制每一个音频块
private fun drawItem(heightNum: Int,lastDanceRight: Float,lastHeight: Float,canvas: Canvas?): Float {var lastHeight1 = lastHeightfor (j in 0 until heightNum) {mDanceRect.set(lastDanceRight,lastHeight1 - danceHeight,lastDanceRight + danceWidth,lastHeight1)mPaint.shader = nullif (j >= heightNum - shaderNum) {val backGradient = LinearGradient(lastDanceRight,lastHeight1 - danceHeight,lastDanceRight + danceWidth,lastHeight1,intArrayOf(colorStart, colorCenter, colorEnd),null,Shader.TileMode.CLAMP)mPaint.shader = backGradient}canvas?.drawRoundRect(mDanceRect, 8f, 8f, mPaint)lastHeight1 -= (danceHeight + danceGap)}return lastHeight1}
就是根据高度来绘制rectangle,算出一列能绘制多少个音频块,每一个音频块是一个rectangle,然后绘制rectangle,为了效果更好,判断上面的音频块加上渐变。
github地址
欢迎点赞收藏,后期会优化
https://github.com/hankinghu/AudioVisulizer
使用方法
<com.masoudss.lib.DanceViewandroid:id="@+id/danceView"android:layout_width="320dp"android:layout_height="300dp"android:layout_gravity="center"app:color_center="@color/red"app:color_end="@color/white"app:color_start="@color/yellow"app:dance_color="@color/yellow"app:dance_corner_radius="2dp"app:dance_gap="2dp"app:max_dance_num="30"app:min_dance_num="2"app:shader_num="3" />
- shader_num 顶部加渐变的个数
- color_end 渐变尾部颜色
- color_start 渐变开头颜色
- color_center 渐变中间颜色
- min_dance_num 每一列中最少显示的个数
- max_dance_num 每一列中最大显示的个数
- dance_gap 每一个音频格之间的间距
android实现音乐跳动效果相关推荐
- Android怎么实现数字增减,Android实现数字跳动效果的TextView方法示例
前言 本文介绍的是Android如何实现数字跳动效果的TextView,主要运用了DancingNumberView,DancingNumberView是一个用于跳动显示文本中数字的控件,继承自Tex ...
- html音乐跳动的线,利用CSS3制作跳动音乐频谱跳动效果
[摘要] CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果. 在一个网站上看到"直播中"的提示标题, ...
- Android开发音乐旋转木马动画,Android 实现旋转木马的音乐效果
一.百度在线音乐旋转木马效果 就上面那个,当音乐在播放的时候,那个光碟轮子在转,就想旋转木马一般.感觉好好玩啊. 碰巧想起前阵子做音乐播放器,哎,那这个也可以做在手机的音乐播放器上,这样就代替了进度条 ...
- android仿小米运动,GitHub - luciferldy/Bnimation: 模仿即刻 App 点赞与数字跳动效果,模仿小米运动首页转圈圈的烟花效果...
Bnimation 现阶段实现了模仿即刻点赞效果以及数字跳动增长,小米运动首页烟花转圈圈(•̀⌄•́)效果. 即刻 即刻的点赞效果 下面是我实现的效果(最下为 TextView 自带的展示数字效果) ...
- android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...
- Android 雪花飘落动画效果 自定义View
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
- 三款Android平台音乐播放器多方位对比
音乐播放器作为重要的娱乐工具,在PC端异常重要,在移动端同样如此.移动端的音乐播放器很多,巨头们纷纷在这个领域布局,腾讯百度等均拥有各自的移动端音乐播放器.爱好音乐的机友们也面临较多的选择. 小编在这 ...
- Android 自定义音乐播放器实现
Android自定义音乐播放器 一:首先介绍用了哪些Android的知识点: 1 MediaPlayer工具来播放音乐 2 Handle.因为存在定时任务(歌词切换,动画,歌词进度条变换等)需要由Ha ...
- arduino点阵声音频谱_创客实战 | 制作一个随音乐跳动的32分频音频频谱显示器
前言 这期作品是通过 Arduino 和四块LED点阵模块,实现32分频的音频频谱可视化显示,让LED随音乐跳动! 主要特点 1.使用简易安装的库 ArduinoFFT 和 MD_MAX72xx.2. ...
最新文章
- pytorch方法测试——损失函数(CrossEntropyLoss)
- Ubuntu 14.04更新为国内阿里源解决apt-get install无法执行的问题
- 基于SpringBoot +Vue+ ElementUI 开发的多用户博客管理平台,就是这么简单!
- Angular CLI 全局 ng.cmd 文件内容分析
- 如何在Azure上创建和部署云服务
- Unity 安装失败原因
- asymptotic (infinite-training-sample)
- SuiteCRM图片上传(自定义控制器)
- 超简洁又强大的幻灯片JS、CSS代码,兼容性强
- 【高等数学】弧微分、渐近线、曲率和曲率半径
- 利用@media与@media screen进行响应式布局
- VM 安装win10 失败
- 综合函数矩量法原理及实现思路
- 程序猿必备福利之二上篇!!!简易使用Nodejs实现从美图网爬取清晰脱俗的美图???
- 记录Linux下安装elasticSearch时遇到的一些错误
- [Ajax]异步的 JavaScript 和 XML:Ajax入门教程(整理)
- imp 00017 由于 oracle 错误 6550,imp 导入dmp文件报错 IMP-00017: 由于 ORACLE 异常 20005 求大神!...
- 【无为则无心Python基础】— 18、Python字符串的格式化输出
- Sidney网站分析感悟:无细分,毋宁死
- 前端面试合集(更新中……)
热门文章
- OCZ REVODRIVE3 used in CentOS 5.x x64 on DELL R610 Server's PCI-E x4
- methods定义方法
- vue-cli脚手架初始化项目各个文件夹用途
- linux4.9编译内核,centos编译linux-4.9内核rpm包
- [导入][幻想情侣][2008热播韩剧][全16集+OST][韩语中字]
- 从three.js的字体文件中提取部分字符
- java毕业设计雷士灯具管理系统源码+lw文档+mybatis+系统+mysql数据库+调试
- 论文笔记:Limited Data Rolling Bearing Fault Diagnosis With Few Shot Learning
- iOS开发-简历中需要特别注意的 3 个点
- JVM命令 jstat