Android RadialGradient 放射渲染

前言

不知不觉，春分已过两天。万物复苏，居住附近的看桃花也开艳了，路边的垂柳，也绿了。怎奈，这两天天气忽变，有了一些倒春寒的感觉，好冷。近几偶然听闻，同事裁员，愿2019一切顺利。

RadialGradient 说明

类继承关系

构造函数

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

1. (centerX,centerY)圆心x,y坐标点。
2. radius 渲染半径。
3. centerColor 渲染圆心颜色。
4. engeColor 渲染圆边缘颜色。
5. tileMode 平铺模式（重复，镜像，边缘拉伸）

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

该构造函数和上个构造函数区别

1. colors[] 颜色数组，至少两个元素，可设置放射渲染的多种过度颜色。
2. stops[] 数组和颜色数组对应，设置各个颜色的渲染起始位置。可以为null（颜色均分）。

代码示例

基本使用

package com.xol.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by wwzhang on 2019/3/22
 */
public class RadialGradientView extends View {
    private Paint mPaint;
    private Shader mShader;
    private int[] mColorTwo;
    private int[] mColorThree;


    public RadialGradientView(Context context) {
        super(context);
    }

    public RadialGradientView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public RadialGradientView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mColorThree = new int[]{
                Color.parseColor("#ff0000"),
                Color.parseColor("#00ff00"),
                Color.parseColor("#0000ff")};
        mColorTwo = new int[]{Color.parseColor("#ff0000"),
                Color.parseColor("#0000ff")};

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //第一排 两色
        mShader = new RadialGradient(200, 200, 40, mColorTwo[0], mColorTwo[1], Shader.TileMode.REPEAT);
        mPaint.setShader(mShader);
        canvas.drawCircle(200, 200, 150, mPaint);

        mShader = new RadialGradient(500, 200, 40, mColorTwo[0], mColorTwo[1], Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 200, 150, mPaint);

        mShader = new RadialGradient(800, 200, 40, mColorTwo[0], mColorTwo[1], Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(800, 200, 150, mPaint);

        //第二排 三色
        mShader = new RadialGradient(200, 500, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.REPEAT);
        mPaint.setShader(mShader);
        canvas.drawCircle(200, 500, 150, mPaint);

        mShader = new RadialGradient(500, 500, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 500, 150, mPaint);

        mShader = new RadialGradient(800, 500, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(800, 500, 150, mPaint);

        //第三排 三色改变渲染色起点位置
        mShader = new RadialGradient(200, 800, 40,
                mColorThree,new float[]{0.5f,0.75f,1.0f},Shader.TileMode.REPEAT);
        mPaint.setShader(mShader);
        canvas.drawCircle(200, 800, 150, mPaint);

        mShader = new RadialGradient(500, 800, 40,
                mColorThree,new float[]{0.5f,0.75f,1.0f},Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 800, 150, mPaint);

        mShader = new RadialGradient(800, 800, 40,
                mColorThree,new float[]{0.5f,0.75f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(800, 800, 150, mPaint);
        //第四排 三色改变，修改渲染坐标
        mShader = new RadialGradient(50, 1100, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(200, 1100, 150, mPaint);

        mShader = new RadialGradient(500, 950, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 1100, 150, mPaint);

        mShader = new RadialGradient(950, 1100, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(800, 1100, 150, mPaint);

    }


}

布局文件

波纹点击效果

package com.xol.widget;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.support.v7.widget.AppCompatButton;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * Created by wwzhang on 2019/3/24
 */
public class RippleButtonView extends AppCompatButton {
    private Paint mPaint;
    private static final int DEFAULT_RADIUS = 50;
    private int mDuration = 500;
    private int radius;
    private int mColorTwo[];
    private Shader mShader;
    private int mCenterX, mCenterY;
    private ObjectAnimator mObjectAnimator;


    public RippleButtonView(Context context) {
        super(context);
    }

    public RippleButtonView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    {
        mCenterX = -1;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mColorTwo = new int[]{Color.parseColor("#0000ff00")
                , Color.parseColor("#ff00ff00")};
    }

    public void setRadius(int radius) {
        this.radius = radius;
        mShader = new RadialGradient(mCenterX, mCenterY, this.radius + 1, mColorTwo[0],
                mColorTwo[1], Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mObjectAnimator == null) {
            mObjectAnimator = ObjectAnimator.ofInt(this, "radius",
                    DEFAULT_RADIUS, getMeasuredWidth());
            mObjectAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    setRadius(0);
                }
            });
            mObjectAnimator.setDuration(mDuration);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (mCenterX != (int) event.getX()) {
            mCenterX = (int) event.getX();
            mCenterY = (int) event.getY();
            setRadius(DEFAULT_RADIUS);
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                return true;
            case MotionEvent.ACTION_UP:
                if (mObjectAnimator.isStarted()) {
                    mObjectAnimator.cancel();
                } else {
                    mObjectAnimator.start();
                }
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mShader != null) {
            canvas.drawCircle(mCenterX, mCenterY,
                    radius, mPaint);
        }
    }
}

布局文件

运行效果

希望对您有所帮助！