Android最简单的方式实现波浪纹和小球

我们先看一下效果

Wave.gif

首先说明这里实现的是刚好一个周期的正弦函数，
我们来说明一下原理，我们是由左向右移动，由于刚好一个周期，所以我们将右边消失的y值正是左边新出现的y值。所以我们可以将函数的y值存储在一个数组里面，然后不断地在数组里面循环地改变不同位置的y值，那么就形成了水波纹效果。

• 首先我们要两组组数组来存储通过正弦函数的得到的y值,和用来交换时存储的函数。

    private float[] mContentOneYs = null;//这两个代表两条线的y值得数据组
    private float[] mContentTwoys = null;
   private float[] mRestoreOnes = null;//这两个分笔试两个数组的备用数组在数组的交换的时候使用
    private float[] mRestoreTwos = null;

然后我们通过x值求出Y的数组

 for (int i = 0; i < mWidth; i++) {
            mContentOneYs[i] = getYPosition(i, SWINGONE, OFFSETONE, INIT_BASE_HEIGHT1);
            mContentTwoys[i] = getYPosition(i, SWINGTWO, OFFSETTWO, INIT_BASE_HEIGHT2);
        }
   private float getYPosition(int x, int swing, int offset, int baseHeight) {
        float cycle = (float) (2 * Math.PI) / mWidth;
        return (float) Math.sin(cycle * x + offset) * swing + baseHeight;
    }

• 说明一下这里面的几个值得意思
  x代表x值，swing代表这幅高度，offset代表一开始的sin'的角度，baseHeight代表基础高度大小，mWidth代表控件的宽度。这个在获取控件宽度的时候实现就是Onsizechang的时候。

• 加下来就是我们移动y值了

  private void changeRestorePosition() {
        if (mWidth != 0) {
            mPosition1 = (mPosition1 + STEP1) % mWidth;//循环显示
            System.arraycopy(mContentOneYs, mPosition1, mRestoreOnes, 0, mWidth - mPosition1);
            System.arraycopy(mContentOneYs, 0, mRestoreOnes, mWidth - mPosition1, mPosition1);

            mPosition2 = (mPosition2 + STEP2) % mWidth;//循环显示
            System.arraycopy(mContentTwoys, mPosition2, mRestoreTwos, 0, mWidth - mPosition2);
            System.arraycopy(mContentTwoys, 0, mRestoreTwos, mWidth - mPosition2, mPosition2);
        }
    }

STEP1 和 STEP2 分别代表不同的移动速度
而要绘制出图形就必须把y值和底部连成线然后由mWidht多太哦直线形成一个函数

 for (int i = 0; i < mWidth; i++) {
            final int x = i;
            final float y1 = mRestoreOnes[i];
            final float y2 = mRestoreTwos[i];
            canvas.drawLine(x, y2, x, mHeight, mPaint2);
            canvas.drawLine(x, y1, x, mHeight, mPaint1);
        }

• 最后是不断刷新 由于人眼一般能分辨的是30fps 所以 我这里设置是睡眠0.05秒当然你不怕性能影响的话就直接在OnDraw的时候invalidate()；
  先面试完整代码

public class WaveView extends View {

    private volatile boolean RUNING=true;
    private final int INIT_BASE_HEIGHT1 = 300;//基础高度
    private final int INIT_BASE_HEIGHT2 = 300;
    private int mHeight;
    private int mWidth;
    private float[] mContentOneYs = null;//这两个代表两条线的y值得数据组
    private float[] mContentTwoys = null;
    private float[] mRestoreOnes = null;//这两个分笔试两个数组的备用数组在数组的交换的时候使用
    private float[] mRestoreTwos = null;
    private static final int SWINGONE = 40;//分别代表两个的正弦函数的上下幅度
    private static final int SWINGTWO = 80;
    private static final int OFFSETONE = 0;//代表一开始的sin 的角度 从 0到360
    private static final int OFFSETTWO = 40;
    private int mPosition1 = 0;//代表起始高度
    private int mPosition2 = 0;
    private static final int STEP1 = 5;//这两个分别代表两条线的两个的速率
    private static final int STEP2 = 8;
    private Paint mPaint1;
    private Paint mPaint2;


    public WaveView(Context context) {
        this(context, null);
    }

    public WaveView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint1.setColor(Color.parseColor("#AB9DCF"));
        mPaint1.setStrokeWidth(4);
        mPaint1.setAlpha(125);

        mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint2.setColor(Color.parseColor("#A2D1F3"));
        mPaint2.setStrokeWidth(4);
        mPaint2.setAlpha(125);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w != 0 || h != 0 || w != oldw || h != oldh) {
            mWidth = w;
            mHeight = h;
            calculatePoints();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        changeRestorePosition();
        for (int i = 0; i < mWidth; i++) {
            final int x = i;
            final float y1 = mRestoreOnes[i];
            final float y2 = mRestoreTwos[i];
            canvas.drawLine(x, y2, x, mHeight, mPaint2);
            canvas.drawLine(x, y1, x, mHeight, mPaint1);
        }
      //  invalidate();//通过这个来形成循环
    }

    private void calculatePoints() {
        mContentOneYs = new float[mWidth];
        mContentTwoys = new float[mWidth];
        mRestoreOnes = new float[mWidth];
        mRestoreTwos = new float[mWidth];
        for (int i = 0; i < mWidth; i++) {
            mContentOneYs[i] = getYPosition(i, SWINGONE, OFFSETONE, INIT_BASE_HEIGHT1);
            mContentTwoys[i] = getYPosition(i, SWINGTWO, OFFSETTWO, INIT_BASE_HEIGHT2);
        }
    }


    private void changeRestorePosition() {
        if (mWidth != 0) {
            mPosition1 = (mPosition1 + STEP1) % mWidth;//循环显示
            System.arraycopy(mContentOneYs, mPosition1, mRestoreOnes, 0, mWidth - mPosition1);
            System.arraycopy(mContentOneYs, 0, mRestoreOnes, mWidth - mPosition1, mPosition1);

            mPosition2 = (mPosition2 + STEP2) % mWidth;//循环显示
            System.arraycopy(mContentTwoys, mPosition2, mRestoreTwos, 0, mWidth - mPosition2);
            System.arraycopy(mContentTwoys, 0, mRestoreTwos, mWidth - mPosition2, mPosition2);
        }
    }

    private float getYPosition(int x, int swing, int offset, int baseHeight) {
        float cycle = (float) (2 * Math.PI) / mWidth;
        return (float) Math.sin(cycle * x + offset) * swing + baseHeight;
    }

    public void startAnimotion()
    {
        RUNING=true;
        final Handler handler=new Handler();
        Thread thread=new Thread(new Runnable() {
            @Override
            public void run() {
                while (RUNING)
                {
                    try {
                        Thread.sleep(50);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            invalidate();
                        }
                    });
                }
            }
        });
        thread.start();
    }

    @Override
    protected void onDetachedFromWindow() {
        RUNING=false;
        super.onDetachedFromWindow();
    }
}

接下来我们要实现小球
我们只需要设置Paint的模式为DST_OUT，关于Paint的模式请参考
吴小龙

image
代码如下

  mPaint2.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
            mCanvas.drawCircle(mWidth/2,mHeight/2,Math.min(mWidth,mHeight)/2,mPaint2);
            canvas.drawBitmap(bitmap,0,0,null);

然后是居中显示 文字

 Paint textPaint = new Paint();          // 创建画笔
            textPaint.setColor(0xffffffff);        // 设置颜色
            textPaint.setStyle(Paint.Style.FILL);   // 设置样式
            textPaint.setTextSize(120);
            Rect targetRect = new Rect((mWidth-mHeight)/2,  0,mHeight+(mWidth-mHeight)/2, mHeight);
//            textPaint.measureText("",0,1);
            Paint.FontMetricsInt fontMetrics = mPaint2.getFontMetricsInt();
            int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
            textPaint.setTextAlign(Paint.Align.CENTER);
            canvas.drawText(value+"分", targetRect.centerX(), baseline+50, textPaint);

同时我们在xml里给他设置一个background
最后得到的效果如下

GIF3.gif

最后代码如下

public class WaveView extends View {
    private int value=80;
    private boolean drawCircle=true;
    private volatile boolean RUNING=true;
    private final int INIT_BASE_HEIGHT1 = 300;//基础高度
    private final int INIT_BASE_HEIGHT2 = 300;
    private int mHeight;
    private int mWidth;
    private float[] mContentOneYs = null;//这两个代表两条线的y值得数据组
    private float[] mContentTwoys = null;
    private float[] mRestoreOnes = null;//这两个分笔试两个数组的备用数组在数组的交换的时候使用
    private float[] mRestoreTwos = null;
    private static final int SWINGONE = 40;//分别代表两个的正弦函数的上下幅度
    private static final int SWINGTWO = 80;
    private static final int OFFSETONE = 0;//代表一开始的sin 的角度 从 0到360
    private static final int OFFSETTWO = 40;
    private int mPosition1 = 0;//代表起始高度
    private int mPosition2 = 0;
    private static final int STEP1 = 5;//这两个分别代表两条线的两个的速率
    private static final int STEP2 = 8;
    private Paint mPaint1;
    private Paint mPaint2;
    private Paint circlePaint;
    Bitmap bitmap;

    Canvas mCanvas;

    public WaveView(Context context) {
        this(context, null);
    }

    public WaveView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint1.setColor(Color.parseColor("#AB9DCF"));
        mPaint1.setStrokeWidth(4);
        mPaint1.setAlpha(125);

        mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint2.setColor(Color.parseColor("#A2D1F3"));
        mPaint2.setStrokeWidth(4);
        mPaint2.setAlpha(125);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        bitmap = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(bitmap);
        mCanvas.drawColor(Color.WHITE);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w != 0 || h != 0 || w != oldw || h != oldh) {
            mWidth = w;
            mHeight = h;
            calculatePoints();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        init();
        changeRestorePosition();
        for (int i = 0; i < mWidth; i++) {
            final int x = i;
            final float y1 = mRestoreOnes[i];
            final float y2 = mRestoreTwos[i];
            canvas.drawLine(x, y2, x, mHeight, mPaint2);
            canvas.drawLine(x, y1, x, mHeight, mPaint1);
        }
      //  invalidate();//通过这个来形成循环

        if(drawCircle)
        {

            Paint textPaint = new Paint();          // 创建画笔
            textPaint.setColor(0xffffffff);        // 设置颜色
            textPaint.setStyle(Paint.Style.FILL);   // 设置样式
            textPaint.setTextSize(120);
            Rect targetRect = new Rect((mWidth-mHeight)/2,  0,mHeight+(mWidth-mHeight)/2, mHeight);
//            textPaint.measureText("",0,1);
            Paint.FontMetricsInt fontMetrics = mPaint2.getFontMetricsInt();
            int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
            textPaint.setTextAlign(Paint.Align.CENTER);
            canvas.drawText(value+"分", targetRect.centerX(), baseline+50, textPaint);
        }
        if (drawCircle ) {
            mPaint2.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
            mCanvas.drawCircle(mWidth/2,mHeight/2,Math.min(mWidth,mHeight)/2,mPaint2);
            canvas.drawBitmap(bitmap,0,0,null);
        }
    }

    private void calculatePoints() {
        mContentOneYs = new float[mWidth];
        mContentTwoys = new float[mWidth];
        mRestoreOnes = new float[mWidth];
        mRestoreTwos = new float[mWidth];
        for (int i = 0; i < mWidth; i++) {
            mContentOneYs[i] = getYPosition(i, SWINGONE, OFFSETONE, INIT_BASE_HEIGHT1);
            mContentTwoys[i] = getYPosition(i, SWINGTWO, OFFSETTWO, INIT_BASE_HEIGHT2);
        }
    }


    private void changeRestorePosition() {
        if (mWidth != 0) {
            mPosition1 = (mPosition1 + STEP1) % mWidth;//循环显示
            System.arraycopy(mContentOneYs, mPosition1, mRestoreOnes, 0, mWidth - mPosition1);
            System.arraycopy(mContentOneYs, 0, mRestoreOnes, mWidth - mPosition1, mPosition1);

            mPosition2 = (mPosition2 + STEP2) % mWidth;//循环显示
            System.arraycopy(mContentTwoys, mPosition2, mRestoreTwos, 0, mWidth - mPosition2);
            System.arraycopy(mContentTwoys, 0, mRestoreTwos, mWidth - mPosition2, mPosition2);
        }
    }

    private float getYPosition(int x, int swing, int offset, int baseHeight) {
        float cycle = (float) (2 * Math.PI) / mWidth;
        return (float) Math.sin(cycle * x + offset) * swing + baseHeight;
    }

    public void startAnimotion()
    {
        RUNING=true;
        final Handler handler=new Handler();
        Thread thread=new Thread(new Runnable() {
            @Override
            public void run() {
                while (RUNING)
                {
                    try {
                        Thread.sleep(50);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            invalidate();
                        }
                    });
                }
            }
        });
        thread.start();
    }

    @Override
    protected void onDetachedFromWindow() {
        RUNING=false;
        super.onDetachedFromWindow();
    }
}