能量球效果（贝塞尔曲线）

在项目中需要用能量球来展示活动余额的剩余量，如下图的效果：

看到效果图，首先就会想怎么实现这个波浪的效果，其实这就是两个波浪线一直在左右移动，然后给你一个一直在那浪啊浪的错觉~~~说到曲线，脑阔中第一个蹦出来的就是贝塞尔曲线。要用贝塞尔曲线，首先还是要确定控制点，先看一张图（没有好的作图工具，凑合着看了- -！）：

如上图，一个完整的波要这5个点来确定，其中B和D点就是控制点，像我这个是将view的宽度均分成4段，这些点的坐标很容易算出来了。
下面贴出画波的主要代码：

    private float waveHeightPercent = 0.7f;   //波的高度百分比    private float waveTranslateValue = 0f;    //波水平移动的比例    private float waveAmplitude;              //波的振幅    private int waveCount = 4;                //波的数量     //这边是为了保证view为正方形，方便后面圆形好弄    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int widthSize = MeasureSpec.getSize(widthMeasureSpec);        int heightSize = MeasureSpec.getSize(heightMeasureSpec);        int minSize = Math.min(widthSize, heightSize);        setMeasuredDimension(minSize, minSize);    }    protected void onDraw(Canvas canvas) {        float levelHeight = (1 - waveHeightPercent) * height;  //波实际高度        float specWidth = width/waveCount;                     //四分之一波长        float translateX = width * waveTranslateValue;         //水平移动的实际距离        //这两个方法是计算波形路径        setFrontWavePath(levelHeight, specWidth, translateX);        setBehindWavePath(levelHeight, specWidth, translateX);        //画后面的波        wavePaint.setColor(ContextCompat.getColor(context, R.color.behind_color));        canvas.drawPath(wavePathBehind, wavePaint);        //画前面的波        wavePaint.setColor(ContextCompat.getColor(context, R.color.front_color));        canvas.drawPath(wavePathFront, wavePaint);    }

下面只贴出setFrontWavePath()这个方法，setBehindWavePath()和它类似，只不过波的方向是反过来的：

private void setFrontWavePath(float levelHeight, float specWidth, float translateX){        wavePathFront.reset();        wavePathFront.moveTo(0 - translateX, height);        wavePathFront.lineTo(0 - translateX, levelHeight);        for(int i=1;i<=waveCount;i++){            float controlX = specWidth * (i*2 - 1) - translateX;            float controlY = i%2 != 0 ? levelHeight - waveAmplitude : levelHeight + waveAmplitude;            float toX = specWidth * (2 * i) - translateX;            wavePathFront.quadTo(controlX, controlY, toX, levelHeight);        }        wavePathFront.lineTo(specWidth * waveCount + translateX, height);        wavePathFront.close();    }

这边画波浪，用的二阶贝塞尔曲线，最后路径闭合，是为了填充颜色。
现在运行一下，基础波形就出来了，入下图：

接下来就是加入动画效果，让波来回移动，代码如下：

   public void waveAnimate(){        ObjectAnimator transAnim = ObjectAnimator.ofFloat(this, "waveTranslateValue", 0, 1);        transAnim.setInterpolator(new LinearInterpolator());        transAnim.setDuration(1000);        transAnim.setRepeatCount(ValueAnimator.INFINITE);        ObjectAnimator upAnim = ObjectAnimator.ofFloat(this, "waveHeightPercent", 0, waveHeightPercent);        upAnim.setDuration(3000);        animatorSet.playTogether(transAnim, upAnim);        animatorSet.start();    }

这边用属性动画来完成波的移动，waveTranslateValue这个属性，控制波的水平移动；waveHeightPercent属性，控制波的高度，现在来看下效果：

到这里，剩下最后一个就是把矩形变成圆形，这边首先想到的就是裁剪画布，那就直接写上代码如下：

clipPath.addCircle(circleX, circleY, circleRadius, Path.Direction.CW);canvas.clipPath(clipPath);

圆的坐标和半径根据view的宽高很容易得到，然后在onDraw中调用canvas.clipPath(clipPath)，实际效果如下：

从图中看到，圆有锯齿，裁剪没有用到Paint类，不好设置抗锯齿，所以效果不是很好。
下面用Paint 的Xfermode模式来修改一下，代码如下：

    //初始化Xfermode    xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);    protected void onDraw(Canvas canvas) {        float levelHeight = (1 - waveHeightPercent) * height;        float specWidth = width/waveCount;        float translateX = width * waveTranslateValue;        canvas.drawCircle(circleX, circleY, circleRadius, bgPaint);        //创建新的图层，进行图像合成        int saveCount = canvas.saveLayer(0, 0, width, height, wavePaint, Canvas.ALL_SAVE_FLAG);        setFrontWavePath(levelHeight, specWidth, translateX);        setBehindWavePath(levelHeight, specWidth, translateX);        wavePaint.setColor(ContextCompat.getColor(context, R.color.behind_color));        canvas.drawPath(wavePathBehind, wavePaint);        wavePaint.setColor(ContextCompat.getColor(context, R.color.front_color));        canvas.drawPath(wavePathFront, wavePaint);        //设置Paint的Xfermode        circlePaint.setXfermode(xfermode);        if(circleBitmap == null){            circleBitmap = createCircleBitmap();        }        canvas.drawBitmap(circleBitmap,circleX - circleRadius, 0, circlePaint);        circlePaint.setXfermode(null);        //释放图层        canvas.restoreToCount(saveCount);    }    //创建圆形Bitmap    private Bitmap createCircleBitmap(){        Bitmap bitmap = Bitmap.createBitmap((int)circleDiameter, (int)circleDiameter, Bitmap.Config.ARGB_8888);        Canvas canvas = new Canvas(bitmap);        Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);        paint.setColor(Color.WHITE);        paint.setStyle(Paint.Style.FILL);        canvas.drawCircle(circleRadius, circleRadius,circleRadius, paint);        return bitmap;    }

上面onDraw中新增的代码都给出了注释，主要就是画圆，然后进行图像合成，改之后的效果如下：

这下就没有锯齿了，到这就基本实现能量球效果。