Android绘图之RadialGradient 放射渐变（11）

版权声明：本文为博主原创文章，转载希望能注明出处，感谢。 https://blog.csdn.net/u010126792/article/details/85245372

1 RadialGradient 简介

LinearGradient 和 SweepGradient，这次讲解RadialGradient；
RadialGradient被称为放射渐变，就是从中心向外圆形渐变。
两个构造函数，第一个构造函数可以实现两种颜色的渐变，第二个构造函数可以实现多个颜色的渐变。

RadialGradient(float centerX, float centerY, float radius, @ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode)；

RadialGradient(float centerX, float centerY, float radius,
        @NonNull @ColorInt int colors[], @Nullable float stops[],
        @NonNull TileMode tileMode)

参数说明：
centerX ,centerY：shader的中心坐标，开始渐变的坐标。
radius:渐变的半径,
centerColor,edgeColor:中心点渐变颜色，边界的渐变颜色，
colors:渐变颜色数组，
stoops:渐变位置数组，类似扫描渐变的positions数组，取值[0,1],中心点为0，半径到达位置为1.0f，
tileMode:shader未覆盖以外的填充模式。

2 两种颜色渐变

构造函数：
RadialGradient(float centerX, float centerY, float radius, @ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode)；

提供中心坐标，半径，颜色值，TileMode

radialGradient = new RadialGradient(450,450,400,Color.RED,Color.GREEN, Shader.TileMode.CLAMP);
mPaint.setShader(radialGradient);
canvas.drawCircle(450,450,450,mPaint);

3 多种颜色放射渐变

May be <code>null</code>. Valid values are between <code>0.0f</code> and
*                 <code>1.0f</code>. The relative position of each corresponding color in
*                 the colors array. If <code>null</code>, colors are distributed evenly
*                 between the center and edge of the circle.

RadialGradient(float centerX, float centerY, float radius,
        @NonNull @ColorInt int colors[], @Nullable float stops[],
        @NonNull TileMode tileMode)

Stops数组取值为[0-1],一般为从小到大，表示每个位置对应的颜色值，如果stops不为null，colors必须和stops一一对应，否则可能导致崩溃，如果stops为null,各颜色从中心到边界线性渐变。

stops数组为null，四种颜色线性渐变：

 int [] colors = {Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW};
 float[] position = new float[4];
 position[0] = 0f;
 position[1] = 0.2f;
 position[2] = 0.9f;
 position[3] = 1.0f;
// radialGradient = new RadialGradient(450,450,400,Color.RED,Color.GREEN, Shader.TileMode.CLAMP);
 radialGradient = new RadialGradient(450,450,400,colors,null, Shader.TileMode.CLAMP);
 mPaint.setShader(radialGradient);
 canvas.drawCircle(450,450,450,mPaint);

stops数组不为null：

 int [] colors = {Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW};
 float[] position = new float[4];
 position[0] = 0f;
 position[1] = 0.2f;
 position[2] = 0.9f;
 position[3] = 1.0f;
 radialGradient = new RadialGradient(450,450,400,colors,position, Shader.TileMode.CLAMP);
 mPaint.setShader(radialGradient);
 canvas.drawCircle(450,450,450,mPaint);

如果数组多余颜色个数：

4 任意view 点击扩散效果

大致做个小例子，如果需要线上使用需要考虑很多问题，类似ondraw最好不要声明对象等：

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (valueAnimator != null && valueAnimator.isRunning()){
        valueAnimator.cancel();
    }
    curx = event.getX();
    cury = event.getY();
    float maxRadius = 0;
    float maxRadius2 = 0;
    if ((width -curx) > curx){
        maxRadius = width -curx;
    }else{
        maxRadius = curx;
    }

    if ((heigth -cury) > cury){
        maxRadius2 = heigth -cury;
    }else{
        maxRadius2 = cury;
    }

    radius = Math.max(maxRadius, maxRadius2);
    valueAnimator = ValueAnimator.ofFloat(1,radius);
    valueAnimator.setDuration(2000);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
          tradius = (Float) animation.getAnimatedValue();
          radialGradient = new RadialGradient(curx,cury, tradius,Color.parseColor("#FFFFFFFF"),Color.GREEN, Shader.TileMode.CLAMP);
          mPaint.setShader(radialGradient);
          invalidate();
      }
  });

    valueAnimator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationCancel(Animator animation) {
            super.onAnimationCancel(animation);
            mPaint.setShader(null);
            tradius = 0;
            invalidate();
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            mPaint.setShader(null);
            tradius = 0;
            invalidate();
        }

        @Override
        public void onAnimationStart(Animator animation) {
            super.onAnimationStart(animation);
        }
    });
    valueAnimator.start();

    return super.onTouchEvent(event);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(curx,cury,tradius,mPaint);
}

替换为多颜色 private int[] colors = {Color.YELLOW, Color.RED, Color.BLUE, Color.GREEN};