Android 5.0 实现水波扩散效果

2023-08-29 11:05:04 111

本文实例为大家分享了Android5.0实现水波扩散效果的具体代码，供大家参考，具体内容如下

该效果是通过自定义界面来实现的

1、首先自定义属性，attrs.xml代码如下：

其中属性rippleColor为水波动画的颜色，rippleAlpha为其透明度，rippleTime为动画持续时间，maskAlpha为触摸遮掩层的透明度。

2、自定义RippleView类继承RelativeLayout布局，也可以由需求所定继承于其它类，实现水波扩散效果主要的有两点：水波扩散的绘制和动画

1)水波的绘制其实就是绘制一个圆形

canvas.drawCircle(mDownX,mDownY,mRadius,mRipplePaint);

2)动画效果就是该圆形的绘制从小到大的过程，而该圆形到最大时的半径长度就是当前所在布局的对角线长度：

@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
//获取最大半径
mMaxRadius=(float)Math.sqrt(w*w+h*h);
}

动画效果用属性动画ObjectAnimator来实现（ObjectAnimator是android3.0后出现的）如下

mRippleAnim=ObjectAnimator.ofFloat(this,"radius",0,mMaxRadius);
mRippleAnim.setInterpolator(newAccelerateDecelerateInterpolator());
mRippleAnim.setDuration(mRippleTime);

其中的radius为自定义的属性，在动画执行时会回调对应的方法，只需要在该方法中更新圆形的半径就行了

publicvoidsetRadius(finalfloatradius){
mRadius=radius;
invalidate();
}

RippleView完整代码如下：

publicclassRippleViewextendsRelativeLayout{

privateintmRippleColor;//水波颜色

privatefloatmMaskAlpha;//遮掩透明度
privatefloatmRippleAlpha;//水波透明度

privateintmRippleTime;//水波动画时间
privateObjectAnimatormRippleAnim;//显示水波动画

privatefloatmRadius;//当前的半径
privatefloatmMaxRadius;//水波最大半径

privatefloatmDownX;//记录手指按下的位置
privatefloatmDownY;
privatebooleanmIsMask;
privatebooleanmIsAnimating;//是否正在播放动画

privateRectFmRect;
privatePathmPath;
privatePaintmMaskPaint;
privatePaintmRipplePaint;

publicRippleView(Contextcontext){
this(context,null);
}

publicRippleView(Contextcontext,AttributeSetattrs){
this(context,attrs,0);
}

publicRippleView(Contextcontext,AttributeSetattrs,intdefStyle){
super(context,attrs,defStyle);
init();
//获取自定义属性
TypedArrayta=context.obtainStyledAttributes(attrs,
R.styleable.RippleView);
mRippleColor=ta.getColor(R.styleable.RippleView_rippleColor,
mRippleColor);
mMaskAlpha=ta.getFloat(R.styleable.RippleView_maskAlpha,mMaskAlpha);
mRippleAlpha=ta.getFloat(R.styleable.RippleView_rippleAlpha,
mRippleAlpha);
mRippleTime=ta.getInt(R.styleable.RippleView_rippleTime,mRippleTime);
ta.recycle();
initLast();
}

//初始化方法
privatevoidinit(){
mRippleColor=Color.BLACK;
mMaskAlpha=0.4f;
mRippleAlpha=0.8f;
mRippleTime=800;

mPath=newPath();
mMaskPaint=newPaint(Paint.ANTI_ALIAS_FLAG);
mRipplePaint=newPaint(Paint.ANTI_ALIAS_FLAG);
}

//初始化
privatevoidinitLast(){
mMaskPaint.setColor(mRippleColor);
mRipplePaint.setColor(mRippleColor);
mMaskPaint.setAlpha((int)(mMaskAlpha*255));
mRipplePaint.setAlpha((int)(mRippleAlpha*255));
}

//初始化动画
privatevoidinitAnim(){
mRippleAnim=ObjectAnimator.ofFloat(this,"radius",0,mMaxRadius);
mRippleAnim.setInterpolator(newAccelerateDecelerateInterpolator());
mRippleAnim.setDuration(mRippleTime);
mRippleAnim.addListener(newAnimator.AnimatorListener(){
@Override
publicvoidonAnimationStart(Animatoranimator){
mIsAnimating=true;
}

@Override
publicvoidonAnimationEnd(Animatoranimator){
setRadius(0);
mIsMask=false;
mIsAnimating=false;
}

@Override
publicvoidonAnimationCancel(Animatoranimator){

}

@Override
publicvoidonAnimationRepeat(Animatoranimator){

}
});
}

@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
//获取最大半径
mMaxRadius=(float)Math.sqrt(w*w+h*h);
//获取该类布局范围
mRect=newRectF(0f,0f,getMeasuredWidth()*1.0f,
getMeasuredHeight()*1.0f);
//初始化动画
initAnim();
}

@Override
publicbooleanonTouchEvent(MotionEventevent){
//按下事件
if(event.getAction()==MotionEvent.ACTION_DOWN){
mIsMask=true;
invalidate();
}elseif(event.getAction()==MotionEvent.ACTION_MOVE){
invalidate();
}
//抬起事件
elseif(event.getAction()==MotionEvent.ACTION_UP){
mDownX=event.getX();
mDownY=event.getY();
if(mIsAnimating){
mRippleAnim.cancel();
}
booleanisInView=mRect.contains(mDownX,mDownY);
if(isInView){
mRippleAnim.start();
}else{
mIsMask=false;
invalidate();
}

}

returntrue;
}

@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
//绘制遮掩
if(mIsMask){
canvas.save(Canvas.CLIP_SAVE_FLAG);
mPath.reset();
mPath.addRect(mRect,Path.Direction.CW);
canvas.clipPath(mPath);
canvas.drawRect(mRect,mMaskPaint);
canvas.restore();

}

//绘制水波
canvas.save(Canvas.CLIP_SAVE_FLAG);
mPath.reset();
mPath.addCircle(mDownX,mDownY,mRadius,Path.Direction.CW);
canvas.clipPath(mPath);
canvas.drawCircle(mDownX,mDownY,mRadius,mRipplePaint);
canvas.restore();

}

//属性动画回调的方法
publicvoidsetRadius(finalfloatradius){
mRadius=radius;
invalidate();
}
}

界面布局代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Android 5.0 实现水波扩散效果

热门推荐

随机推荐