20181015183605uYomUVM3iB9s5eJK.jpg

具體思路

首先自定義布局是了解的蜈块，可能會用到surfaceView去繪制，整個動畫可以分為四個部分迷扇，第一個是旋轉(zhuǎn)的圖片百揭，這個好說；第二個是運動并且透明度漸變的三角形蜓席，這個畫畫也簡單器一；第三個是根據(jù)音樂變化而變化的一個曲線吧，這個可能比較難瓮床，我也沒接觸過盹舞，不過可以試試看，第四個是模糊的背景隘庄，這個簡單踢步。

具體實現(xiàn)

實現(xiàn)模糊的背景

這個倒是簡單，之前也用過一個模糊背景的工具還不錯丑掺，不過存在一個問題获印，我是打算自定義一個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.由于我后面畫三角形必須得不停地刷新，背景需要重復(fù)繪制面徽，感覺有點浪費資源艳丛，看了一下局部刷新什么的感覺沒什么用，所以就直接先設(shè)置為父布局的普通的背景好了趟紊，再將surfaceView設(shè)置為透明

@Override
public void surfaceCreated(SurfaceHolder surfaceHolder) 
{
    setZOrderOnTop(true);
    getHolder().setFormat(PixelFormat.TRANSLUCENT);
}

Android圖片模糊的工具類:http://www.reibang.com/p/c676fc51f3ef

實現(xiàn)旋轉(zhuǎn)的圖片

這個更簡單氮双，為了方便也是直接使用一個ImageView，通過自帶的視圖裁剪工具剪裁為圓形霎匈，然后通過屬性動畫來旋轉(zhuǎn)

設(shè)置一直旋轉(zhuǎn)的屬性動畫

objectAnimator = ObjectAnimator.ofFloat(ivShowPic, "rotation", 0f, 360f);
objectAnimator.setDuration(20 * 1000);
objectAnimator.setRepeatMode(ValueAnimator.RESTART);
objectAnimator.setInterpolator(new LinearInterpolator());
objectAnimator.setRepeatCount(-1);
objectAnimator.start();

視圖裁剪

/**
     * 設(shè)置裁剪為圓形
     *
     * @param view
     * @param pading  這個是設(shè)置間距是長或?qū)挼膸追种?     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public static void setCircleShape(View view, final int pading) {
        view.setClipToOutline(true);
        view.setOutlineProvider(new ViewOutlineProvider() {
            @Override
            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);
            }
        });
    }

實現(xiàn)運動的三角形

為了保證性能戴差，這個就得使用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();
    }

}

隨機生成了三角形

簡單的方法，就是先指定一個坐標區(qū)域比如x和y從-50到50的這個矩形坐標區(qū)域內(nèi)蚓让，隨機取點乾忱，如果構(gòu)成三角形就為一個隨機三角形，到時候移到中心處只需要x和y坐標各加長寬的一半就好了历极，方向也是-180度到180度取隨機數(shù)窄瘟，便于到時候用斜率計算移動后的位置

畫三角形

自定義surfaceView的通用寫法都一樣，隨便看一下文章

Android中的SurfaceView詳解:http://www.reibang.com/p/b037249e6d31

我們先清空畫布趟卸，然后可以隨機生成一些三角形蹄葱，保存所有生成的三角形到一個集合里面，然后設(shè)定一個速度锄列，根據(jù)每個三角形的方向來計算距離上一次刷新移動到了哪個位置图云，通過位置計算與中心點的距離來設(shè)置透明度，然后畫上去

//三角形移動速度
private double moveSpeed = 0.4;
//刷新時間
private static int refreshTime = 20;
//添加兩次三角形的間隔
private static int addTriangleInterval = 100;
//每次添加的數(shù)量限制
private static int addTriangleOnece = 2;
//總?cè)切螖?shù)量
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);

具體代碼看項目源碼邻邮，這里注意需要設(shè)定幾個值來調(diào)整動畫效果到最佳竣况，做的過程中也有出現(xiàn)一些很魔性的動畫，很有意思

然后發(fā)現(xiàn)筒严，surfaceView的動畫會出現(xiàn)在imageView的上面丹泉，雖然我把imageView的高度調(diào)了一下還是沒效果，發(fā)現(xiàn)是之前設(shè)置surfaceView透明的時候setZOrderOnTop(true)導(dǎo)致的問題鸭蛙；但是如果不設(shè)置surfaceView又會遮擋背景摹恨，的確是沒好辦法解決

其實可以簡單點，判斷三角形的移動距離小于imageView的時候設(shè)置全透明就好了娶视，做出來大概是這樣的效果：

視頻效果：http://oy5r220jg.bkt.clouddn.com/record__1107012332_1.mp4

其實還是有一點問題的晒哄，可以把Imageview的旋轉(zhuǎn)在surfaceView里面實現(xiàn)，這個應(yīng)該三角形的出現(xiàn)可以會自然一點歇万，其他解決辦法倒是暫時沒想到

優(yōu)化

為了讓三角形出現(xiàn)自然一點揩晴，可以把Imageview的旋轉(zhuǎn)在surfaceView里面實現(xiàn)，但是好像不好做贪磺，因為還得裁剪圖片和控制旋轉(zhuǎn),相比imageView來實現(xiàn)我覺得稍微有點麻煩了硫兰；那還可以不設(shè)置setZOrderOnTop(true)，這樣背景變成了黑色寒锚，還需要畫一個背景上去劫映；

那么兩種方法比較一下违孝，其實模糊化以后的背景質(zhì)量非常小（圖片都模糊了肯定小呀）泳赋，遠遠小于要旋轉(zhuǎn)的那張圖片的質(zhì)量雌桑，所以繪制surfaceView背景可能比較好；

獲取控件的截圖

由于我的surfaceView不是寬高全屏的祖今，只是中間一部分校坑，而且給surfaceView設(shè)置的背景圖片肯定要和整個布局的背景重合，可以先獲取背景視圖的截圖千诬，然后在這里面裁剪出surfaceView所在區(qū)域

//啟用DrawingCache并創(chuàng)建位圖
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);
//關(guān)閉DrawingCache
iv_bg.setDrawingCacheEnabled(false);

為什么要先獲取背景視圖的截圖耍目，而不直接用那個模糊化的圖片呢，因為模糊化的圖片尺寸超級小徐绑，顯示的時候被放大了邪驮，而且可能還被裁剪了（背景用的imageView顯示的），為保證裁剪后和背景重合還得做很多圖象處理傲茄，還是直接獲取截圖來的簡單

動態(tài)獲取顏色

關(guān)于三角形的顏色毅访，其實也是要根據(jù)背景來設(shè)定的

Material Design鼓勵使用動態(tài)顏色，新的Palette支持庫可以提取圖片中的一部分顏色來設(shè)置你的UI的樣式來使界面顏色互相搭配以提供一種沉浸式體驗盘榨。提取出來的調(diào)色板（palette）包括突出的和柔和的色調(diào)
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();
//我用這個和網(wǎng)易云接近较曼，其他顏色也都挺漂亮
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

未標題-1.png

改變圖片的亮度

但是發(fā)現(xiàn)一個問題磷斧，背景顏色太亮了，我選擇palette.getLightMutedSwatch()是最亮的顏色捷犹，還是會被背景干擾弛饭，這個設(shè)置最上層的布局背景為半透明，發(fā)現(xiàn)我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);

改變了亮度后對動態(tài)獲取顏色會有影響拒担，亮色的可能獲取不到了，獲取顏色應(yīng)該提前獲取

開始畫線

仔細看了一下攻询，先畫圍繞這個圓畫很多點从撼，隔一段一個點，然后把點用曲線圈起來就ok了钧栖，動的時候就是設(shè)置一個上下移動的距離低零，一個點變成兩個婆翔，兩個點先連線，然后同一側(cè)的點重新連成曲線掏婶，感覺是是這樣的啃奴，先試試

圍繞圓畫點

這個就是直線和圓的交點問題，從-180度到180度雄妥，每間隔一個角度最蕾，取斜率計算交點，差不多是這個意思

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

未標題-1.png

畫出來一看老厌，這是什么情況揖膜，根本不均勻，沒道理呀梅桩，原來是Math.sin(angle)和Math.cos(angle)里面的值指的是弧度，不是角度拜隧，所以轉(zhuǎn)換一下

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);

原理如下圖

二階貝塞爾曲線

處理點的跳動

到了最后一步洪添，讓點分裂成兩個分別上下移動后垦页，再次將同一邊的連成曲線并將移動后的上下兩個點連線，移動距離先取隨機數(shù)干奢，效果好了再看音頻相關(guān)東西痊焊，這個有點難度，我嘗試了很多次忿峻，都不是我想要的結(jié)果

未標題-3.png

看起來都失敗了薄啥，感覺這個移動距離不能取隨機數(shù)，最后一個看起來比較像是手動輸入了一組均勻的數(shù)據(jù)逛尚，并且是直接畫的直線

獲取音頻信息

感覺模擬數(shù)據(jù)不行垄惧，還是先看看怎么獲取音頻信息；獲取音頻信息比較簡單

1.使用MediaPlayer播放傳入的音樂绰寞，并拿到mediaPlayerId
2.使用Visualizer類拿到拿到MediaPlayer播放中的音頻數(shù)據(jù)（wave/fft）
3.將數(shù)據(jù)用自定義控件展現(xiàn)出來
使用Visualizer需要錄音的動態(tài)權(quán)限到逊， 如果播放sd卡音頻需要STORAGE權(quán)限

<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回調(diào)

Visualizer.OnDataCaptureListener 有2個回調(diào)，一個用于顯示FFT數(shù)據(jù)滤钱，展示不同頻率的振幅觉壶，另一個用于顯示聲音的波形圖

private Visualizer.OnDataCaptureListener dataCaptureListener = new Visualizer.OnDataCaptureListener() {
        @Override
        public void onWaveFormDataCapture(Visualizer visualizer, final byte[] waveform, int samplingRate) {
            //到waveform為波形圖數(shù)據(jù)
        }

        @Override
        public void onFftDataCapture(Visualizer visualizer, final byte[] fft, int samplingRate) {
            //FFT數(shù)據(jù)，展示不同頻率的振幅
        }
    };

Visualizer 有兩個比較重要的參數(shù)
設(shè)置可視化數(shù)據(jù)的數(shù)據(jù)大小 范圍[Visualizer.getCaptureSizeRange()[0]~Visualizer.getCaptureSizeRange()1]
設(shè)置可視化數(shù)據(jù)的采集頻率 范圍[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);

有一個很有意思的地方件缸，如果audioSessionId設(shè)置為零铜靶，就直接獲取系統(tǒng)的音頻，這個很有意思停团，連蒙帶猜搞出來的

visualizer = new Visualizer(0);

這樣紙我們就拿到了兩組數(shù)據(jù)旷坦，波形圖和頻譜圖掏熬，很顯然頻譜圖是展示不同頻率的振幅的，一般情況下只有少部分頻率會變動秒梅，所以我選擇波形圖旗芬。

拿到的波形圖是一個byte數(shù)組，里面也是類似每個點的振幅捆蜀，我們把數(shù)組里的數(shù)據(jù)作為高度畫一條線疮丛，排成一排正常畫出來

 //畫音頻線
    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);
    }

效果是這樣紙，用另一個頻譜圖也差不多辆它，就是變化的區(qū)域有點少

這樣紙的話誊薄，那是不是我把它繞圓一圈，然后在按相反方向繞一圈锰茉，同樣跳動的兩個點連線呢蔫，然后隨便畫畫曲線是不是就ok啦；做完就發(fā)現(xiàn)里面的值太大了飒筑，都看不出來是個圓了片吊，那就都減去一點高度什么的，調(diào)整一下大行拧俏脊；然后這次就先畫一個三次貝塞爾曲線吧，畫出來跟跟屎一樣肤晓，這個曲線是真的難畫呀爷贫，而且畫的慢，看起來不是很流暢补憾；我再次嘗試用簡單的方法畫

折線的頂點時候用圓角漫萄，并沒有什么亂用

mPaint.setStrokeJoin(Paint.Join.ROUND);

設(shè)置path中的連接處有個角度，看起來接近了一些余蟹，不過還是差很遠

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

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

其實可以看出來做法是沒有問題的卷胯，但是必須先對數(shù)據(jù)進行處理才能得到想要的效果，但是具體怎么處理這個的確需要不斷嘗試威酒；如果處理好可以做出更多更好看的效果窑睁；

其他效果（下載視頻才能正常播放）：http://lc-hfysfg0s.cn-n1.lcfile.com/19962ada548649c692ed.mp4

上面的視頻效果在github的之前的提交版本里，有興趣可以找找葵孤，現(xiàn)在在不斷嘗試新的效果担钮，有找到比較好的，會更新上來尤仍；有誰搞出炫酷的效果箫津，希望大家不吝賜教

有想法的同學(xué)記得告訴我呀，使用前需要先播放音樂哦，聲音不能設(shè)置太小

視頻轉(zhuǎn)Gif工具實現(xiàn)：http://www.reibang.com/p/81cb36b610f4
視頻的裁剪其實也是上面這個項目的代碼苏遥，但是暫時沒有做功能饼拍，會更新
項目地址：https://github.com/tyhjh/Jinyuneffect