今天主要实现的效果类似于Android Material Design中按钮点击的效果,我们来自定义一个这样的效果.
首先,咱们先看效果.
效果大家看到了,咱们现在就开始实现.
首先自定义一个View继承自Button,重写一下构造方法以及onDraw方法.由于我们自定义的控件大部分都用于xml中,所以我们重写一个参以及两个参的构造.在构造当中咱们初始化一下画笔.
public GradientButton(Context context) {
super(context);
init();
}
public GradientButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private voidinit() {
mPaint=new Paint();
}
由于涉及到水波纹动画效果,那我们肯定得重写ontouchEvent方法,通过监听触摸事件来处理这个动画效果.其实我们可以想想,要实现水波纹效果,我们主要就是不停的从里向外画圆,然后给一个颜色的范围,这样就可以达到我们想要的效果了.这里我们要用到的就是Paint的Shader渲染,shader渲染主要包括以下四种:
1.LinearGradient--线性渲染
可用于:霓虹灯文字，倒影图片
2.SweepGradient----渐变渲染/梯度渲染
可用于:雷达扫描效果
3.RadialGradient----环形渲染
可用于:水波纹效果
4.ComposeShader----组合渲染,多种渲染组合在一起使用.
很显然,我们今天要使用的就是RadialGradient渲染.下面看代码
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mX,mY,mCurRadius,mPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if(mX!= event.getX() ||mY!= event.getY()) {
mX= (int) event.getX();
mY= (int) event.getY();
setRadius(DEFAULT_RADIUS);
}
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
return true;
case MotionEvent.ACTION_UP:
if(mAnimator!=null&&mAnimator.isRunning()) {
mAnimator.cancel();
}
if(mAnimator==null) {
mAnimator= ObjectAnimator.ofInt(this,"radius",50, getWidth());
mAnimator.setDuration(500);
}
mAnimator.setInterpolator(newAccelerateInterpolator());
mAnimator.addListener(newAnimator.AnimatorListener() {
@Override
public voidonAnimationStart(Animator animation) {
}
@Override
public voidonAnimationEnd(Animator animation) {
setRadius(0);
}
@Override
public voidonAnimationCancel(Animator animation) {
}
@Override
public voidonAnimationRepeat(Animator animation) {
}
});
mAnimator.start();
break;
}
return super.onTouchEvent(event);
}
private void setRadius(int i) {
mCurRadius= i;
if(mCurRadius>0) {
radialGradient=new RadialGradient(mX,mY,mCurRadius,0x00FFFFFF,0xFF58FAAC, Shader.TileMode.CLAMP);
mPaint.setShader(radialGradient);
}
postInvalidate();
}
解释一下,当我们按下按钮的时候,闲话一个圆,这个圆很小,当我们松开按钮的时候这个圆就像水波纹一样慢慢散开.
在MotionEvent.ACTION_UP中,我们初始化了RadialGradient,参数分别为其实中心点的x,y坐标,环形的半径,环形中心点颜色,圆形外边缘颜色以及shader的拉伸模式,这里我们定义了拉伸模式为CLAMP.解释一下这个拉伸模式:
Shader的拉伸模式分为以下几种:
1.CLAMP --是拉伸最后一个像素铺满
2.MIRROR ---是横向纵向不足处不断翻转镜像平铺
3.REPEAT ---类似电脑壁纸，横向纵向不足的重复放置
咱们可以看一下源码:
最后在onDraw方法中不停的画圆.效果就出来了.下次我们实现一下仿雷达效果.
