Android如何实现水波纹效果

2024-10-29 技术教程

这篇文章主要为大家展示了“Android如何实现水波纹效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Android如何实现水波纹效果”这篇文章吧。

效果图

attrs.xml

自定义属性

<declare-styleablename="RippleAnimationView"><attrname="ripple_anim_color"format="color"/><attrname="ripple_anim_type"format="enum"><enumname="fillRipple"value="0"/><enumname="strokeRipple"value="1"/></attr><attrname="radius"format="integer"/><attrname="stroeWidth"format="integer"/></declare-styleable>

RippleAnimationView.java

管理水波纹属性以及动画状态

publicclassRippleAnimationViewextendsRelativeLayout{privatePaintpaint;privateintradius;privateintstrokeWidth;privateintrippleColor;privateAnimatorSetanimatorSet;publicRippleAnimationView(Contextcontext){this(context,null);}publicRippleAnimationView(Contextcontext,@NullableAttributeSetattrs){this(context,attrs,0);}publicRippleAnimationView(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);init(context,attrs);}privatevoidinit(Contextcontext,AttributeSetattrs){paint=newPaint();paint.setAntiAlias(true);TypedArrayarray=context.obtainStyledAttributes(attrs,R.styleable.RippleAnimationView);//水波纹填充类型intrippleType=array.getInt(R.styleable.RippleAnimationView_ripple_anim_type,0);radius=array.getInteger(R.styleable.RippleAnimationView_radius,54);strokeWidth=array.getInteger(R.styleable.RippleAnimationView_stroeWidth,2);rippleColor=array.getColor(R.styleable.RippleAnimationView_ripple_anim_color,ContextCompat.getColor(context,R.color.colorAccent));array.recycle();//设置画笔线宽paint.setStrokeWidth(UIUtils.getInstance().getWidth(strokeWidth));if(rippleType==0){paint.setStyle(Paint.Style.FILL);}else{paint.setStyle(Paint.Style.STROKE);}paint.setColor(rippleColor);LayoutParamsparams=newLayoutParams(UIUtils.getInstance().getWidth(radius+strokeWidth),UIUtils.getInstance().getWidth(radius+strokeWidth));params.addRule(CENTER_IN_PARENT,TRUE);//缩放系数floatmaxScale=UIUtils.getInstance().displayMetricsWidth/(2*UIUtils.getInstance().getWidth(radius+strokeWidth));//延迟时间intrippleDuration=3500;intsingleDelay=rippleDuration/4;//时间间隔//动画集合List<Animator>animatorList=newArrayList<>();//实例化水波纹viewfor(inti=0;i<4;i++){RippleCircleViewrippleCircleView=newRippleCircleView(this);addView(rippleCircleView,params);//添加水波纹到集合viewList.add(rippleCircleView);//初始化属性动画//xObjectAnimatorscaleXAnimator=ObjectAnimator.ofFloat(rippleCircleView,"ScaleX",1.0f,maxScale);scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE);//无限循环scaleXAnimator.setRepeatMode(ObjectAnimator.RESTART);scaleXAnimator.setStartDelay(i*singleDelay);scaleXAnimator.setDuration(rippleDuration);animatorList.add(scaleXAnimator);//yObjectAnimatorscaleYAnimator=ObjectAnimator.ofFloat(rippleCircleView,"ScaleY",1.0f,maxScale);scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE);//无限循环scaleYAnimator.setRepeatMode(ObjectAnimator.RESTART);scaleYAnimator.setStartDelay(i*singleDelay);scaleYAnimator.setDuration(rippleDuration);animatorList.add(scaleYAnimator);//alphaObjectAnimatoralphaAnimator=ObjectAnimator.ofFloat(rippleCircleView,"Alpha",1.0f,0f);alphaAnimator.setRepeatCount(ObjectAnimator.INFINITE);//无限循环alphaAnimator.setRepeatMode(ObjectAnimator.RESTART);alphaAnimator.setStartDelay(i*singleDelay);alphaAnimator.setDuration(rippleDuration);animatorList.add(alphaAnimator);}animatorSet=newAnimatorSet();animatorSet.setInterpolator(newAccelerateDecelerateInterpolator());//差值器:先加速，后减速animatorSet.playTogether(animatorList);}privatebooleananimationRunning;privateList<RippleCircleView>viewList=newArrayList<>();/***开启动画*/publicvoidstartRippleAnimation(){if(!animationRunning){for(RippleCircleViewrippleCircleView:viewList){rippleCircleView.setVisibility(VISIBLE);}animatorSet.start();animationRunning=true;}}/***结束动画*/publicvoidstopRippleAnimation(){if(animationRunning){//逆序播放（从外向内播放动画）Collections.reverse(viewList);for(RippleCircleViewrippleCircleView:viewList){rippleCircleView.setVisibility(INVISIBLE);}animatorSet.end();animationRunning=false;}}publicintgetStrokeWidth(){returnstrokeWidth;}publicPaintgetPaint(){returnpaint;}publicbooleanisAnimationRunning(){returnanimationRunning;}}

RippleCircleView.java

绘制水波纹

publicclassRippleCircleViewextendsView{privateRippleAnimationViewrippleAnimationView;publicRippleCircleView(RippleAnimationViewrippleAnimationView){this(rippleAnimationView.getContext(),null);this.rippleAnimationView=rippleAnimationView;//一开始隐藏this.setVisibility(INVISIBLE);}publicRippleCircleView(Contextcontext,@NullableAttributeSetattrs){super(context,attrs);}publicRippleCircleView(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);}@OverrideprotectedvoidonDraw(Canvascanvas){intradius=Math.min(getWidth(),getHeight())/2;//画圆canvas.drawCircle(radius,radius,radius-rippleAnimationView.getStrokeWidth(),rippleAnimationView.getPaint());}}

使用水波纹动画

<com.wangyi.course.lession4.RippleAnimationViewxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/ripple_view"android:layout_width="match_parent"android:layout_height="match_parent"app:ripple_anim_color="#c0362e"app:stroeWidth="18"app:ripple_anim_type="strokeRipple"app:radius="150"><ImageViewandroid:id="@+id/iv_play"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_centerVertical="true"android:src="@drawable/ic_play"/></com.wangyi.course.lession4.RippleAnimationView>

RippleAnimationViewrippleAnimationView=findViewById(R.id.ripple_view);findViewById(R.id.iv_play).setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewv){if(rippleAnimationView.isAnimationRunning()){rippleAnimationView.stopRippleAnimation();}else{rippleAnimationView.startRippleAnimation();}}});

以上是“Android如何实现水波纹效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！