Android 仿网易云鲸云音效动效
code小生,一個專注 Android 領域的技術平臺
公眾號回復 Android 加入我的安卓技術群
作者：Tyhj
鏈接：https://www.jianshu.com/p/d2996afeb3e1
聲明：本文已獲Tyhj授權發表，轉發等請聯系原作者授權
最近網易云音樂出了一個叫鯨云音效東西，效果怎么樣不是很清楚，但是播放界面還帶了動效，這個就比較炫酷了，感覺比較有意思，所以也想自己做一個，其中一個我覺得比較好看的效果如下（動圖的來源也比較有意思，后面會講）
具體思路
首先自定義布局是了解的，可能會用到 surfaceView 去繪制，整個動畫可以分為四個部分，第一個是旋轉的圖片，這個好說；第二個是運動并且透明度漸變的三角形，這個畫畫也簡單；第三個是根據音樂變化而變化的一個曲線吧，這個可能比較難，我也沒接觸過，不過可以試試看，第四個是模糊的背景，這個簡單。
具體實現
實現模糊的背景
這個倒是簡單，之前也用過一個模糊背景的工具還不錯，不過存在一個問題，我是打算自定義一個 surfaceView，給 surfaceView 畫一個背景倒是不難，也遇到兩個問題
1.怎么將圖片以類似自動裁剪居中的方式畫上去，這個想想其實簡單，取得畫布的大小和bitmap的大小，滿足一邊進行縮放，裁剪掉多余部分就好了
/**?????*?裁剪圖片
?????*
?????*?@param?rectBitmap
?????*?@param?rectSurface
?????*/
????public?static?void?centerCrop(Rect?rectBitmap,?Rect?rectSurface)?{
????????int?verticalTimes?=?rectBitmap.height()?/?rectSurface.height();
????????int?horizontalTimes?=?rectBitmap.width()?/?rectSurface.width();
????????if?(verticalTimes?>?horizontalTimes)?{
????????????rectBitmap.left?=?0;
????????????rectBitmap.right?=?rectBitmap.right;
????????????rectBitmap.top?=?(rectBitmap.height()?-?(rectSurface.height()?*?rectBitmap.width()?/?rectSurface.width()))?/?2;
????????????rectBitmap.bottom?=?rectBitmap.bottom?-?rectBitmap.top;
????????}?else?{
????????????rectBitmap.top?=?0;
????????????rectBitmap.bottom?=?rectBitmap.bottom;
????????????rectBitmap.left?=?(rectBitmap.width()?-?(rectSurface.width()?*?rectBitmap.height()?/?rectSurface.height()))?/?2;
????????????rectBitmap.right?=?rectBitmap.right?-?rectBitmap.left;
????????}
????}
2.由于我后面畫三角形必須得不停地刷新，背景需要重復繪制，感覺有點浪費資源，看了一下局部刷新什么的感覺沒什么用，所以就直接先設置為父布局的普通的背景好了，再將 surfaceView 設置為透明
public?void?surfaceCreated(SurfaceHolder?surfaceHolder)?
{
????setZOrderOnTop(true);
????getHolder().setFormat(PixelFormat.TRANSLUCENT);
}
Android 圖片模糊的工具類:
https://www.jianshu.com/p/c676fc51f3ef
實現旋轉的圖片
這個更簡單，為了方便也是直接使用一個 ImageView，通過自帶的視圖裁剪工具剪裁為圓形，然后通過屬性動畫來旋轉
設置一直旋轉的屬性動畫
objectAnimator?=?ObjectAnimator.ofFloat(ivShowPic,?"rotation",?0f,?360f);objectAnimator.setDuration(20?*?1000);
objectAnimator.setRepeatMode(ValueAnimator.RESTART);
objectAnimator.setInterpolator(new?LinearInterpolator());
objectAnimator.setRepeatCount(-1);
objectAnimator.start();
視圖裁剪
/**?????*?設置裁剪為圓形
?????*
?????*?@param?view
?????*?@param?pading??這個是設置間距是長或寬的幾分之一
?????*/
????(api?=?Build.VERSION_CODES.LOLLIPOP)
????public?static?void?setCircleShape(View?view,?final?int?pading)?{
????????view.setClipToOutline(true);
????????view.setOutlineProvider(new?ViewOutlineProvider()?{
????????????
????????????public?void?getOutline(View?view,?Outline?outline)?{
????????????????int?margin?=?Math.min(view.getWidth(),?view.getHeight())?/?pading;
????????????????outline.setOval(margin,?margin,?view.getWidth()?-?margin,?view.getHeight()?-?margin);
????????????}
????????});
????}
實現運動的三角形
為了保證性能，這個就得使用 surfaceView 來做了；大體思路就是隨機生成一些三角形，三角形速度大小一樣，方向隨機，從圓中心向外移動，移動過程將透明度減小到零
三角形有速度不過速度大小都一樣就先不用管，有速度方向用角度來代替，也好計算運動后的位置，有三個頂點坐標。
所以三角形的初步定義
public?class?Triangle?{????public?Point?topPoint1,?topPoint2,?topPoint3;
????public?int?moveAngle;
????public?Triangle(Point?topPoint1,?Point?topPoint2,?Point?topPoint3)?{
????????this.topPoint1?=?topPoint1;
????????this.topPoint2?=?topPoint2;
????????this.topPoint3?=?topPoint3;
????????moveAngle?=?getMoveAngel();
????}
}
隨機生成了三角形
簡單的方法，就是先指定一個坐標區域比如x和y從-50到50的這個矩形坐標區域內，隨機取點，如果構成三角形就為一個隨機三角形，到時候移到中心處只需要x和y坐標各加長寬的一半就好了，方向也是-180度到180度取隨機數，便于到時候用斜率計算移動后的位置
畫三角形
自定義 surfaceView 的通用寫法都一樣，隨便看一下文章
Android中的 SurfaceView 詳解:
https://www.jianshu.com/p/b037249e6d31
我們先清空畫布，然后可以隨機生成一些三角形，保存所有生成的三角形到一個集合里面，然后設定一個速度，根據每個三角形的方向來計算距離上一次刷新移動到了哪個位置，通過位置計算與中心點的距離來設置透明度，然后畫上去
//三角形移動速度private?double?moveSpeed?=?0.4;
//刷新時間
private?static?int?refreshTime?=?20;
//添加兩次三角形的間隔
private?static?int?addTriangleInterval?=?100;
//每次添加的數量限制
private?static?int?addTriangleOnece?=?2;
//總三角形數量
private?int?allTriangleCount?=?100;
mCanvas?=?mSurfaceHolder.lockCanvas();
mCanvas.drawColor(0,?PorterDuff.Mode.CLEAR);
manageTriangle((int)?(refreshTime?*?moveSpeed));
for?(Triangle?triangle?:?triangleList)?{
????drawTriangle(mCanvas,?triangle,?mPaintColor);
}
mSurfaceHolder.unlockCanvasAndPost(mCanvas);
Thread.sleep(refreshTime);
具體代碼看項目源碼，這里注意需要設定幾個值來調整動畫效果到最佳，做的過程中也有出現一些很魔性的動畫，很有意思
然后發現，surfaceView 的動畫會出現在 imageView 的上面，雖然我把imageView 的高度調了一下還是沒效果，發現是之前設置 surfaceView 透明的時候 setZOrderOnTop(true) 導致的問題；但是如果不設置 surfaceView 又會遮擋背景，的確是沒好辦法解決
其實可以簡單點，判斷三角形的移動距離小于 imageView 的時候設置全透明就好了，做出來大概是這樣的效果：
視頻效果：http://oy5r220jg.bkt.clouddn.com/record__1107012332_1.mp4
其實還是有一點問題的，可以把 Imageview 的旋轉在 surfaceView 里面實現，這個應該三角形的出現可以會自然一點，其他解決辦法倒是暫時沒想到
優化
為了讓三角形出現自然一點，可以把 Imageview 的旋轉在 surfaceView 里面實現，但是好像不好做，因為還得裁剪圖片和控制旋轉,相比 imageView 來實現我覺得稍微有點麻煩了；那還可以不設置 setZOrderOnTop(true)，這樣背景變成了黑色，還需要畫一個背景上去；
那么兩種方法比較一下，其實模糊化以后的背景質量非常小（圖片都模糊了肯定小呀），遠遠小于要旋轉的那張圖片的質量，所以繪制surfaceView背景可能比較好；
獲取控件的截圖
由于我的 surfaceView 不是寬高全屏的，只是中間一部分，而且給surfaceView 設置的背景圖片肯定要和整個布局的背景重合，可以先獲取背景視圖的截圖，然后在這里面裁剪出 surfaceView 所在區域
//啟用DrawingCache并創建位圖iv_bg.setDrawingCacheEnabled(true);
iv_bg.buildDrawingCache();
//獲取bitmap
Bitmap?bitmap2?=?Bitmap.createBitmap(iv_bg.getDrawingCache());
//裁剪
bitmap2?=?Bitmap.createBitmap(bitmap2,?0,?jinyunView.getTop(),?jinyunView.getWidth(),?jinyunView.getHeight());
//bitmap2傳給surfaceView
jinyunView.setBitmapBg(bitmap2);
//關閉DrawingCache
iv_bg.setDrawingCacheEnabled(false);
為什么要先獲取背景視圖的截圖，而不直接用那個模糊化的圖片呢，因為模糊化的圖片尺寸超級小，顯示的時候被放大了，而且可能還被裁剪了（背景用的imageView顯示的），為保證裁剪后和背景重合還得做很多圖象處理，還是直接獲取截圖來的簡單
動態獲取顏色
關于三角形的顏色，其實也是要根據背景來設定的
Material Design 鼓勵使用動態顏色，新的 Palette 支持庫可以提取圖片中的一部分顏色來設置你的 UI 的樣式來使界面顏色互相搭配以提供一種沉浸式體驗。提取出來的調色板（palette）包括突出的和柔和的色調
Vibrant （有活力）
Vibrant dark（有活力 暗色）
Vibrant light（有活力 亮色）
Muted （柔和）
Muted dark（柔和 暗色）
Muted light（柔和 亮色）
就是可以從bitmap中獲取幾種特殊的顏色，注意獲取到的swatche可能為空的
//?Palette的部分Palette?palette?=?Palette.generate(bitmap);
Palette.Swatch?swatche?=?null;
//獲取不同風格的顏色，
swatche?=?palette.getVibrantSwatch();
swatche?=?palette.getLightVibrantSwatch();
swatche?=?palette.getDarkVibrantSwatch();
swatche?=?palette.getMutedSwatch();
//我用這個和網易云接近，其他顏色也都挺漂亮
swatche?=?palette.getLightMutedSwatch();
swatche?=?palette.getDarkMutedSwatch();
swatche?=?palette.getVibrantSwatch();
//獲取顏色
int?color?=?swatche.getRgb();
視頻效果：http://lc-fgtnb2h8.cn-n1.lcfile.com/7f08b2eea6a4039cf453.mp4
換個顏色：http://lc-fgtnb2h8.cn-n1.lcfile.com/45e70109d2cbc9b7371b.mp4
改變圖片的亮度
但是發現一個問題，背景顏色太亮了，我選擇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);
畫出來一看，這是什么情況，根本不均勻，沒道理呀，原來是 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()?{
????
????public?void?onPrepared(MediaPlayer?mediaPlayer)?{
????????mediaPlayer.start();
????}
});
Visualizer回調
Visualizer.OnDataCaptureListener 有2個回調，一個用于顯示FFT數據，展示不同頻率的振幅，另一個用于顯示聲音的波形圖
private?Visualizer.OnDataCaptureListener?dataCaptureListener?=?new?Visualizer.OnDataCaptureListener()?{????????
????????public?void?onWaveFormDataCapture(Visualizer?visualizer,?final?byte[]?waveform,?int?samplingRate)?{
????????????//到waveform為波形圖數據
????????}
????????
????????public?void?onFftDataCapture(Visualizer?visualizer,?final?byte[]?fft,?int?samplingRate)?{
????????????//FFT數據，展示不同頻率的振幅
????????}
????};
Visualizer 有兩個比較重要的參數
設置可視化數據的數據大小 范圍[Visualizer.getCaptureSizeRange()[0]~Visualizer.getCaptureSizeRange()1]
設置可視化數據的采集頻率 范圍[0~Visualizer.getMaxCaptureRate()]
//采樣的最大值
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);
有一個很有意思的地方，如果audioSessionId設置為零，就直接獲取系統的音頻，這個很有意思，連蒙帶猜搞出來的
visualizer?=?new?Visualizer(0);這樣紙我們就拿到了兩組數據，波形圖和頻譜圖，很顯然頻譜圖是展示不同頻率的振幅的，一般情況下只有少部分頻率會變動，所以我選擇波形圖。
拿到的波形圖是一個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);
????}
效果是這樣紙，用另一個頻譜圖也差不多，就是變化的區域有點少
這樣紙的話，那是不是我把它繞圓一圈，然后在按相反方向繞一圈，同樣跳動的兩個點連線，然后隨便畫畫曲線是不是就ok啦；做完就發現里面的值太大了，都看不出來是個圓了，那就都減去一點高度什么的，調整一下大小；然后這次就先畫一個三次貝塞爾曲線吧，畫出來跟跟屎一樣，這個曲線是真的難畫呀，而且畫的慢，看起來不是很流暢；我再次嘗試用簡單的方法畫
折線的頂點時候用圓角，并沒有什么亂用
mPaint.setStrokeJoin(Paint.Join.ROUND);設置path中的連接處有個角度，看起來接近了一些，不過還是差很遠
CornerPathEffect?cornerPathEffect?=?new?CornerPathEffect(130);mPaint.setPathEffect(cornerPathEffect);
視頻效果：http://lc-fgtnb2h8.cn-n1.lcfile.com/fada1f97f943dd6e944d.mp4
其實可以看出來做法是沒有問題的，但是必須先對數據進行處理才能得到想要的效果，但是具體怎么處理這個的確需要不斷嘗試；如果處理好可以做出更多更好看的效果；
上面的視頻效果在github的之前的提交版本里，有興趣可以找找，現在在不斷嘗試新的效果，有找到比較好的，會更新上來；有誰搞出炫酷的效果，希望大家不吝賜教
有想法的同學記得告訴我呀
視頻轉Gif工具實現：https://www.jianshu.com/p/81cb36b610f4
視頻的裁剪其實也是上面這個項目的代碼，但是暫時沒有做功能，會更新
項目地址：https://github.com/tyhjh/Jinyuneffect
分享技術我是認真的
總結
以上是生活随笔為你收集整理的Android 仿网易云鲸云音效动效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蒙特卡罗方法和拉斯维加斯方法
- 下一篇： Android网易云鲸云音效UI