Android如何實(shí)現(xiàn)漸變色水波紋效果

這篇文章主要介紹了Android如何實(shí)現(xiàn)漸變色水波紋效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

項(xiàng)目中使用到的效果，效果圖如下：

代碼實(shí)現(xiàn)：

public class WaveView extends View {
    private Paint mPaint, mCriclePaint, mTextPaint;
    // 傾斜或旋轉(zhuǎn)、快速變化,當(dāng)在屏幕上畫(huà)一條直線時(shí), 橫豎不會(huì)出現(xiàn)鋸齒,
    // 但是當(dāng)斜著畫(huà)時(shí), 就會(huì)出現(xiàn)鋸齒的效果,所以需要設(shè)置抗鋸齒
    private DrawFilter mDrawFilter;
 
    private int mTotalHeight, mTotalWidth;
    private int mXoffset = 0;
    private float[] mPointY;
    private float[] mDaymicPointY;
    private int currentIndex = 1;
    private  int currentColor=0xaa3bb6e7;
    //波浪線移動(dòng)速度
    private static final int X_SPEED = 20;
    private int percent;
 
    public void setPercent(int percent) {
        this.percent = percent;
    }
 
    public WaveView(Context context) {
        super(context);
        init();
    }
 
    public int getCurrentIndex() {
        return currentIndex;
    }
 
    public void setCurrentIndex(int currentIndex) {
        this.currentIndex = currentIndex;
        if (currentIndex==1){
            currentColor = 0xaa3bb6e7;
        }else if(currentIndex==2){
            currentColor = 0xaa3c3c3c;
        }else if (currentIndex==3){
            currentColor = 0xaa724527;
        }
    }
 
    public WaveView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
 
    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
 
    private void init() {
        //圖片線條（通用）的抗鋸齒需要另外設(shè)置
        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        //實(shí)例化一個(gè)畫(huà)筆
        mPaint = new Paint();
        //去除畫(huà)筆鋸齒
        mPaint.setAntiAlias(true);
        //設(shè)置畫(huà)筆風(fēng)格為實(shí)線
        mPaint.setStyle(Paint.Style.FILL);
        //設(shè)置畫(huà)筆顏色
        mPaint.setColor(Color.GREEN);
        //實(shí)例化圓的畫(huà)筆
        mCriclePaint = new Paint(mPaint);
        mCriclePaint.setColor(Color.parseColor("#88dddddd"));
        mCriclePaint.setAlpha(255);
        //實(shí)例化文字畫(huà)筆
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
    }
 
    LinearGradient linearGradient;
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //去除鋸齒
        canvas.setDrawFilter(mDrawFilter);
        runWave();
        int canvasWidth = canvas.getWidth();
        int canvasHeight = canvas.getHeight();
        int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);
        // canvas.drawCircle(mTotalWidth / 2, mTotalHeight / 2, mTotalWidth / 2, mCriclePaint);
        //設(shè)置顏色混合模式
        // mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //高減去寬除以2使水波紋底部在圓底部，動(dòng)態(tài)改變percent值，在Y軸上變化
        //畫(huà)進(jìn)度條
        //aa3c3c3c
        //aa724527
        final int c = currentColor;
        int colorSweep[] = {c,Color.TRANSPARENT};
        //設(shè)置漸變色
        linearGradient = new LinearGradient(0, mTotalHeight-percent*mTotalHeight/100-80,0,mTotalHeight, colorSweep, null, Shader.TileMode.MIRROR);
 
        mPaint.setShader(linearGradient);
        for (int i = 0; i < mTotalWidth; i++) {
 
            canvas.drawLine(i, mTotalHeight - mDaymicPointY[i] - (mTotalHeight - mTotalWidth) / 2 - percent * mTotalWidth / 100, i, mTotalHeight - (mTotalHeight - mTotalWidth) / 2, mPaint);
        }
//        RoundLightBarView
        //最后將畫(huà)筆去除Xfermode
        // mPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
        //改變兩條波紋的移動(dòng)點(diǎn)
        mXoffset += X_SPEED;
        //如果已經(jīng)移動(dòng)到末尾處，則到頭重新移動(dòng)
        if (mXoffset > mTotalWidth) {
            mXoffset = 0;
        }
        String text = percent + " ";
 
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setTextSize(180);
        float textLength = mTextPaint.measureText(text);
        int textY = mTotalHeight - percent * mTotalHeight / 100;
        if (textY < 180) {
            textY = 180;
        }
        if (textY > mTotalHeight - 80) {
            textY = mTotalHeight - 80;
        }
        canvas.drawText(text, (mTotalWidth - textLength) / 2, textY, mTextPaint);
        mTextPaint.setTextSize(90);
        String aText = percent < 10 ? "     %" : percent < 100 ? "          %" : "              %";
//4 9 13
        canvas.drawText(aText, (mTotalWidth - textLength) / 2, textY, mTextPaint);
//        LogUtils.d("totalWdith:"+mTotalWidth+"---totalH:"+mTotalHeight);
        //引起view重繪
        postInvalidateDelayed(300);
    }
 
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTotalHeight = h;
        mTotalWidth = w;
        //數(shù)組的長(zhǎng)度為view的寬度
        mPointY = new float[w];
        mDaymicPointY = new float[w];
        //這里我們以view的總寬度為周期，y = a * sin(2π) + b
        for (int i = 0; i < mTotalWidth; i++) {
            mPointY[i] = (float) (20 * (Math.sin(2 * Math.PI * i / w)));
        }
    }
 
    private void runWave() {
        // 超出屏幕的挪到前面，mXoffset表示第一條水波紋要移動(dòng)的距離
        int yIntelrval = mPointY.length - mXoffset;
        //使用System.arraycopy方式重新填充第一條波紋的數(shù)據(jù)
        System.arraycopy(mPointY, 0, mDaymicPointY, mXoffset, yIntelrval);
        System.arraycopy(mPointY, yIntelrval, mDaymicPointY, 0, mXoffset);
    }
}

實(shí)現(xiàn)原理：

1、首先波浪的繪制是很多個(gè)豎直的線，并通過(guò)正弦坐標(biāo)轉(zhuǎn)換坐標(biāo)實(shí)現(xiàn)。

2、漸變色通過(guò)設(shè)置畫(huà)筆LinearGradient實(shí)現(xiàn)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Android如何實(shí)現(xiàn)漸變色水波紋效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!