仿android原生按钮点击水波纹效果

仿android原生按钮点击水波纹效果

转载请注明出处
http://blog.csdn.net/oddshou/article/details/73457480

先看效果

现在介绍原理，因为需要点击效果的控件可能是按钮、图片、甚至自定义控件，所以从view继承，下面先给出代码

public class RadialGradientView extends Activity {


    private static final String TAG = "RadialGradientView";
    private TestView mTestview;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mTestview = new TestView(this);
        setContentView(R.layout.activity_container);
        LinearLayout container = (LinearLayout) findViewById(R.id.container);
        container.addView(mTestview, 200, 100);


        mTestview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(RadialGradientView.this, "你点我了", Toast.LENGTH_SHORT).show();
            }
        });
    }

    public class TestView extends View implements ValueAnimator.AnimatorUpdateListener{
        Paint mGradientPaint;
        private static final int START_COLOR = 0X00FFFFFF;
        private static final int END_COLOR = 0xFF58FAAC;
        float mTouchx;
        float mTouchy;
        float mRadius;

        public int getBalpha() {
            return balpha;
        }

        public void setBalpha(int balpha) {
            this.balpha = balpha;
        }

        int balpha = 255;

        public float getMRadius() {
            return mRadius;
        }

        public void setMRadius(float mRadius) {
            this.mRadius = mRadius;
        }


        AnimatorSet animationSet;

        public TestView(Context context) {
            super(context);
            mGradientPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            setBackgroundColor(Color.GREEN);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (event.getAction() != MotionEvent.ACTION_DOWN) {
                return super.onTouchEvent(event);
            }

            mTouchx = event.getX();
            mTouchy = event.getY();
            RadialGradient radialGradient = new RadialGradient(mTouchx, mTouchy, 150,
                    0x00dddddd, 0x00FFFFFF, Shader.TileMode.CLAMP);
//            mGradientPaint.setShader(radialGradient); //shader暂不使用
            mGradientPaint.setColor(Color.GRAY);
//            Logger.i(TAG, "onTouchEvent: " + mTouchx + " mTouchy " + mTouchy, "oddshou");
            startAnimation();
            return super.onTouchEvent(event);
        }


        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mGradientPaint.setAlpha(balpha);
            canvas.drawCircle(mTouchx, mTouchy, mRadius, mGradientPaint);
        }

        private void createAnimation() {
            if (animationSet == null) {
                animationSet = new AnimatorSet();
                ValueAnimator animation1 = ObjectAnimator.ofFloat(this, "mRadius", 0, 200);
                animation1.setDuration(300);
                animation1.setInterpolator(new LinearInterpolator());
                animation1.addUpdateListener(this);

                ValueAnimator animator2 = ObjectAnimator.ofInt(this, "balpha", 255, 0);
                animator2.setDuration(300);
                animator2.setInterpolator(new DecelerateInterpolator());
                animationSet.play(animation1).with(animator2);


            }
        }

        public void startAnimation(){
            //构建动画，执行动画
            createAnimation();
            animationSet.start();
        }
        public void onAnimationUpdate(ValueAnimator animation) {
            invalidate();
        }
    }

}

原理：
1、在ontouch中对于ACTION_DOWN做处理，获取点击坐标,

            mTouchx = event.getX();
            mTouchy = event.getY();
            RadialGradient radialGradient = new RadialGradient(mTouchx, mTouchy, 150,
                    0x00dddddd, 0x00FFFFFF, Shader.TileMode.CLAMP);
//            mGradientPaint.setShader(radialGradient); //shader暂不使用
            mGradientPaint.setColor(Color.GRAY);
//            Logger.i(TAG, "onTouchEvent: " + mTouchx + " mTouchy " + mTouchy, "oddshou");
            startAnimation();

mTouchx,mTouchy 用于绘制，在onTouch中点击启动动画。
动画效果是两个动画合在一起，一个是半径逐渐扩大的圆，一个是透明度alpha 逐渐下降。
具体动画实现在createAnimation() 方法中，用属性动画，所以额外在控件中定义了一些属性。也可以将这些属性单独成立另外一个对象。AnimtorSet 实现动画集合，使动画同时执行。

整个实现过程比较简单，这个demo认为遗留的一些问题在这里说明以下。
1.关于连续多次点击可能会引起bug，毕竟动画没有做执行过程中的判断。
2.关于android原生的效果还稍有不同，需要注意。变化的色值可以自选。
3.色值可以设置shader，可以很多意想不到的效果。