自定义简单的按钮点击动画效果

先来看看效果：

 

按钮的效果看到了吗？

我们就要实现这个炫酷的效果。

这里我使用自定义字体图标View，不知道怎么自定义的朋友请参考我的另外一篇博客： Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

代码很简单，可以把代码带入其他的View中都可以实现这样的点击效果

public class FontTextView extends TextView {


    private static final int FRAME_RATE = 10;
    private static final int DURATION = 250;
    private static final int FILL_INITIAL_OPACITY = 200;
    private static final int STROKE_INITIAL_OPACITY = 255;

    private float mHalfWidth;
    private float mHalfHeight;
    private boolean mAnimationIsRunning = false;
    private int mTimer = 0;
    private Paint mFillPaint;
    private Paint mStrokePaint;

    public FontTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 引入字体图标
//        Typeface font = Typeface.createFromAsset(context.getAssets(),
//                "iconFont/iconfont.ttf");
        // 设置字体图标
        this.setTypeface(YktApplication.FONT);

        init();
    }

    private void init() {
        if (isInEditMode()) {
            return;
        }

        //设置画笔颜色
        int rippleColor = getResources().getColor(R.color.format_bar_ripple_animation);

        //设置实心画笔
        mFillPaint = new Paint();
        mFillPaint.setAntiAlias(true);
        mFillPaint.setColor(rippleColor);
        mFillPaint.setStyle(Paint.Style.FILL);
        mFillPaint.setAlpha(FILL_INITIAL_OPACITY);

        //设置空心画笔
        mStrokePaint = new Paint();
        mStrokePaint.setAntiAlias(true);
        mStrokePaint.setColor(rippleColor);
        mStrokePaint.setStyle(Paint.Style.STROKE);
        mStrokePaint.setStrokeWidth(2);
        mStrokePaint.setAlpha(STROKE_INITIAL_OPACITY);

        //自定义View中如果重写了onDraw()即自定义了绘制，那么就应该在构造函数中调用view的setWillNotDraw(false)，设置该flag标志。默认该标志就是false。
        setWillNotDraw(false);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        //用来循环的绘制
        if (mAnimationIsRunning) { //是否循环条件判断
            if (DURATION <= mTimer * FRAME_RATE) { //用来停止循环绘制的变化的条件
                mAnimationIsRunning = false;
                mTimer = 0;
            } else {
                //绘制
                float progressFraction = ((float) mTimer * FRAME_RATE) / DURATION;

                mFillPaint.setAlpha((int) (FILL_INITIAL_OPACITY * (1 - progressFraction)));
                mStrokePaint.setAlpha((int) (STROKE_INITIAL_OPACITY * (1 - progressFraction)));

                //各个参数  mHalfWidth：圆心x坐标  mHalfHeight：圆心y坐标  ，半径 ，画笔
                canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth * progressFraction, mFillPaint);
                canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth * progressFraction, mStrokePaint);
                mTimer++;
            }
            invalidate(); //重绘 用作循环，执行这条语句的话会再次调用draw方法
        }
    }

    @Override
    public boolean onTouchEvent(@NonNull MotionEvent event) {
        //监听触摸事件，执行绘制
        startRippleAnimation();
        return super.onTouchEvent(event);
    }

    private void startRippleAnimation() {
        if (this.isEnabled() && !mAnimationIsRunning) {
            //获取圆心坐标 
            mHalfWidth = getMeasuredWidth() / 2;
            mHalfHeight = getMeasuredHeight() / 2;
            mAnimationIsRunning = true;
            invalidate();
        }
    }
}

是不是很简单，是的就是这么简单。