Android如何实现渐变色水波纹效果

这篇文章主要介绍了Android如何实现渐变色水波纹效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

项目中使用到的效果，效果图如下：

代码实现：

public class WaveView extends View {    private Paint mPaint, mCriclePaint, mTextPaint;    // 倾斜或旋转、快速变化,当在屏幕上画一条直线时, 横竖不会出现锯齿,    // 但是当斜着画时, 就会出现锯齿的效果,所以需要设置抗锯齿    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;    //波浪线移动速度    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() {        //图片线条（通用）的抗锯齿需要另外设置        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);        //实例化一个画笔        mPaint = new Paint();        //去除画笔锯齿        mPaint.setAntiAlias(true);        //设置画笔风格为实线        mPaint.setStyle(Paint.Style.FILL);        //设置画笔颜色        mPaint.setColor(Color.GREEN);        //实例化圆的画笔        mCriclePaint = new Paint(mPaint);        mCriclePaint.setColor(Color.parseColor("#88dddddd"));        mCriclePaint.setAlpha(255);        //实例化文字画笔        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);        //设置颜色混合模式        // mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));        //高减去宽除以2使水波纹底部在圆底部，动态改变percent值，在Y轴上变化        //画进度条        //aa3c3c3c        //aa724527        final int c = currentColor;        int colorSweep[] = {c,Color.TRANSPARENT};        //设置渐变色        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        //最后将画笔去除Xfermode        // mPaint.setXfermode(null);        canvas.restoreToCount(layerId);        //改变两条波纹的移动点        mXoffset += X_SPEED;        //如果已经移动到末尾处，则到头重新移动        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;        //数组的长度为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表示第一条水波纹要移动的距离        int yIntelrval = mPointY.length - mXoffset;        //使用System.arraycopy方式重新填充第一条波纹的数据        System.arraycopy(mPointY, 0, mDaymicPointY, mXoffset, yIntelrval);        System.arraycopy(mPointY, yIntelrval, mDaymicPointY, 0, mXoffset);    }}

实现原理：

首先波浪的绘制是很多个竖直的线，并通过正弦坐标转换坐标实现。

渐变色通过设置画笔LinearGradient实现。

感谢你能够认真阅读完这篇文章，希望小编分享的“Android如何实现渐变色水波纹效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!