Android仿网易云鲸云音效动效

20181015183605uYomUVM3iB9s5eJK.jpg

最近网易云音乐出了一个叫鲸云音效东西，效果怎么样不是很清楚，但是播放界面还带了动效，这个就比较炫酷了，感觉比较有意思，所以也想自己做一个，其中一个我觉得比较好看的效果如下（动图的来源也比较有意思，后面会讲）

未标题-1.png

改变图片的亮度

但是发现一个问题，背景颜色太亮了，我选择palette.getLightMutedSwatch()是最亮的颜色，还是会被背景干扰，这个设置最上层的布局背景为半透明，发现我surfaceView也跟着被半透明覆盖了呀，如果只覆盖背景的话，surfaceView绘制的背景是从作为背景的ImageVIew截取的图片，会和背景颜色不一样的，只能从背景ImageView入手，还真的有改变亮度的办法，不仅可以改变亮度，还可以改变色相和饱和度

ColorMatrix colorMatrix = new ColorMatrix();
//改变图片亮度
colorMatrix.setScale(0.5f,0.5f,0.5f,1);
ColorMatrixColorFilter colorFilter = new ColorMatrixColorFilter(colorMatrix);
iv_bg.setColorFilter(colorFilter);

改变了亮度后对动态获取颜色会有影响，亮色的可能获取不到了，获取颜色应该提前获取

开始画线

仔细看了一下，先画围绕这个圆画很多点，隔一段一个点，然后把点用曲线圈起来就ok了，动的时候就是设置一个上下移动的距离，一个点变成两个，两个点先连线，然后同一侧的点重新连成曲线，感觉是是这样的，先试试

围绕圆画点

这个就是直线和圆的交点问题，从-180度到180度，每间隔一个角度，取斜率计算交点，差不多是这个意思

y = (Math.sin(angle) * circleR);
x = (Math.cos(angle) * circleR);

未标题-1.png

画出来一看，这是什么情况，根本不均匀，没道理呀，原来是Math.sin(angle)和Math.cos(angle)里面的值指的是弧度，不是角度，所以转换一下

y = (Math.sin(Math.toRadians(angle)) * circleR);
x = (Math.cos(Math.toRadians(angle)) * circleR);

画贝塞尔曲线

我先用二阶贝塞尔曲线把相邻的点连了起来，中间的点取的是两个点的圆弧中间的点，反正看起来是一个圆

Path path = new Path();
path.moveTo(point.x, point.y);
//画二阶贝塞尔曲线
path.quadTo(bezierPoint.x, bezierPoint.y, next.x, next.y);
canvas.drawPath(path, paint);

原理如下图

二阶贝塞尔曲线

处理点的跳动

到了最后一步，让点分裂成两个分别上下移动后，再次将同一边的连成曲线并将移动后的上下两个点连线，移动距离先取随机数，效果好了再看音频相关东西，这个有点难度，我尝试了很多次，都不是我想要的结果

未标题-3.png

看起来都失败了，感觉这个移动距离不能取随机数，最后一个看起来比较像是手动输入了一组均匀的数据，并且是直接画的直线

获取音频信息

感觉模拟数据不行，还是先看看怎么获取音频信息；获取音频信息比较简单

1.使用MediaPlayer播放传入的音乐，并拿到mediaPlayerId
2.使用Visualizer类拿到拿到MediaPlayer播放中的音频数据（wave/fft）
3.将数据用自定义控件展现出来
使用Visualizer需要录音的动态权限， 如果播放sd卡音频需要STORAGE权限

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

播放音乐

MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.music_wheresilove);
mediaPlayer.setLooping(true);
mediaPlayer.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
    @Override
    public void onPrepared(MediaPlayer mediaPlayer) {
        mediaPlayer.start();
    }
});

Visualizer回调

Visualizer.OnDataCaptureListener 有2个回调，一个用于显示FFT数据，展示不同频率的振幅，另一个用于显示声音的波形图

private Visualizer.OnDataCaptureListener dataCaptureListener = new Visualizer.OnDataCaptureListener() {
        @Override
        public void onWaveFormDataCapture(Visualizer visualizer, final byte[] waveform, int samplingRate) {
            //到waveform为波形图数据
        }

        @Override
        public void onFftDataCapture(Visualizer visualizer, final byte[] fft, int samplingRate) {
            //FFT数据，展示不同频率的振幅
        }
    };

Visualizer 有两个比较重要的参数
设置可视化数据的数据大小 范围[Visualizer.getCaptureSizeRange()[0]~Visualizer.getCaptureSizeRange()1]
设置可视化数据的采集频率 范围[0~Visualizer.getMaxCaptureRate()]

visualizer = new Visualizer(mediaPlayer.getAudioSessionId());
//采样的最大值
int captureSize = Visualizer.getCaptureSizeRange()[1];
 //采样的频率
int captureRate = Visualizer.getMaxCaptureRate() * 3 / 4;
visualizer.setCaptureSize(captureSize);
visualizer.setDataCaptureListener(dataCaptureListener, captureRate, true, true);
visualizer.setScalingMode(Visualizer.SCALING_MODE_NORMALIZED);
visualizer.setEnabled(true);

这样纸我们就拿到了两组数据，波形图和频谱图，很显然频谱图是展示不同频率的振幅的，一般情况下只有少部分频率会变动，所以我选择波形图。

拿到的波形图是一个byte数组，里面也是类似每个点的振幅，我们把数组里的数据作为高度画一条线，排成一排正常画出来

 //画音频线
    private void drawAudioLine(Canvas canvas) {
        if (mPoints == null || mPoints.length < mBytes.length * 4) {
            mPoints = new float[mBytes.length * 4];
        }
        for (int i = 1; i < pointSize; i++) {
            if (mBytes[i] < 0) {
                mBytes[i] = 127;
            }
            mPoints[i * 4] = getWidth() * i / pointSize;
            mPoints[i * 4 + 1] = getHeight() / 2;
            mPoints[i * 4 + 2] = getWidth() * i / pointSize;
            mPoints[i * 4 + 3] = 2 + getHeight() / 2 - mBytes[i];
        }
        canvas.drawLines(mPoints, mPaint);
    }

效果是这样纸，用另一个频谱图也差不多，就是变化的区域有点少

未标题-2.png-159.6kB

这样纸的话，那是不是我把它绕圆一圈，然后在按相反方向绕一圈，同样跳动的两个点连线，然后随便画画曲线是不是就ok啦；做完就发现里面的值太大了，都看不出来是个圆了，那就都减去一点高度什么的，调整一下大小；然后这次就先画一个三次贝塞尔曲线吧，画出来跟跟屎一样，这个曲线是真的难画呀，而且画的慢，看起来不是很流畅；我再次尝试用简单的方法画

折线的顶点时候用圆角，并没有什么乱用

mPaint.setStrokeJoin(Paint.Join.ROUND);

设置path中的连接处有个角度，看起来接近了一些，不过还是差很远

CornerPathEffect cornerPathEffect = new CornerPathEffect(130);
mPaint.setPathEffect(cornerPathEffect);

视频效果：http://lc-fgtnb2h8.cn-n1.lcfile.com/fada1f97f943dd6e944d.mp4

感觉必须先对数据进行处理才能得到想要的效果

有想法的同学记得告诉我呀

未完待续...

视频转Gif工具实现：https://www.jianshu.com/p/81cb36b610f4
视频的裁剪其实也是上面这个项目的代码，但是暂时没有做功能，会更新
项目地址：https://github.com/tyhjh/Jinyuneffect