android实现音乐跳动效果的示例代码

 更新时间:2021年04月09日 11:03:26   作者:Hanking65203  
这篇文章主要介绍了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() {
            @Override
            public void onWaveFormDataCapture(Visualizer visualizer, byte[] bytes,
                                              int samplingRate) {
                BaseVisualizer.this.mRawAudioBytes = bytes;
                invalidate();
            }

            @Override
            public 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() / 255f
                var 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 = lastHeight
        for (j in 0 until heightNum) {
            mDanceRect.set(
                lastDanceRight,
                lastHeight1 - danceHeight,
                lastDanceRight + danceWidth,
                lastHeight1
            )
            mPaint.shader = null
            if (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地址

使用方法

<com.masoudss.lib.DanceView
              android: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编程之SharedPreferences文件存储操作实例分析

    Android编程之SharedPreferences文件存储操作实例分析

    这篇文章主要介绍了Android编程之SharedPreferences文件存储操作方法,实例分析了SharedPreferences文件操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • Android系统关机的全流程解析

    Android系统关机的全流程解析

    这篇文章主要介绍了Android系统关机的全流程解析,从上层空间一直深入到内核全面讲解,非常推荐!需要的朋友可以参考下
    2016-02-02
  • eclipse搭建android开发环境详细步骤

    eclipse搭建android开发环境详细步骤

    本文主要介绍了eclipse搭建android开发环境详细步骤,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Android RecyclerView添加上拉加载更多效果

    Android RecyclerView添加上拉加载更多效果

    这篇文章主要为大家详细介绍了Android RecyclerView添加上拉加载更多效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • android在异步任务中关闭Cursor的代码方法

    android在异步任务中关闭Cursor的代码方法

    android在异步任务中如何关闭Cursor?在我们开发应用的时候,很多时候会遇到这种问题,下面我们就看看代码如何实现
    2013-11-11
  • Android快速实现一个财务APP程序详解

    Android快速实现一个财务APP程序详解

    这篇文章主要介绍了Android实现的财务APP程序,结合前后端共功能完善,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Android仿QQ长按删除弹出框功能示例

    Android仿QQ长按删除弹出框功能示例

    对于列表来说,如果想操作某个列表项,一般会采用长按弹出菜单的形式,默认的上下文菜单比较难看,而QQ的上下文菜单就人性化多了,整个菜单给用户一种气泡弹出的感觉,而且会显示在手指按下的位置,接下来通过本文给大家分享Android仿QQ长按删除弹出框功能,一起看看吧
    2017-03-03
  • RecyclerView上拉加载封装代码

    RecyclerView上拉加载封装代码

    这篇文章主要为大家详细介绍了RecyclerView上拉加载封装代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android通过SOCKET下载文件的方法

    Android通过SOCKET下载文件的方法

    这篇文章主要介绍了Android通过SOCKET下载文件的方法,实例分析了Android使用Socket进行文件传输的技巧,需要的朋友可以参考下
    2015-12-12
  • Android中播放在线音乐代码

    Android中播放在线音乐代码

    这篇文章主要介绍了Android中播放在线音乐代码,本文只给出了核心操作代码,需要的朋友可以参考下
    2015-04-04

最新评论