仿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，可以很多意想不到的效果。