当前位置：首页 > news >正文

一起Talk Android吧（第五百一十五回：绘制向外扩散的水波纹)

news 2025/8/2 21:04:11

文章目录

整体思路
实现方法
示例代码

各位看官们大家好，上一回中咱们说的例子是"Java中的进制转换",这一回中咱们说的例子是"绘制向外扩散的水波纹"。闲话休提，言归正转，让我们一起Talk Android吧！

整体思路

我们使用自定义View的思路来实现水波纹，先画一个圆环，然后通过动画不断地放大圆环进而形成向外扩散的效果，在放大圆环的同时让圆环逐渐变透明，形成波纹消失
的效果。两种动画效果叠加在一起就形成了扩散的水波纹效果。

实现方法

重写构造方法，在构造方法中初始化画笔相关参数；也可以把圆环的大小，半径，颜色做成自定义属性，通过属性来配置圆环的大小等信息；
重写测量方法，主要是计算圆环的长度和宽度，我们在这里就不不重写该方法了，大家可以参考自定义View中的模板代码；
重写绘制方法，在该方法中绘制一个圆环，绘制时计算圆环的位置（圆心），同时会使用圆环的半径和画笔；
创建一个动画集，其中包含大小缩放和透明度渐变两个子动画；缩放时只放大，渐变时从不透明渐渐变透明；
把自定义的波纹控件放到布局中，并且在给该控件绑定上一步中创建的动画集；

示例代码

介绍完实现方法，下面是示例代码，请大家参考：

public class WaveView extends View {private Paint mPaint;private int radius;private int circleWidth;private Context mContext;public WaveView(Context context) {super(context);init(context);}public WaveView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init(context);}public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);init(context);}private void init(Context context) {mContext = context;mPaint = new Paint();mPaint.setColor(Color.BLUE);mPaint.setStyle(Paint.Style.STROKE);mPaint.setAntiAlias(true);circleWidth = 20;mPaint.setStrokeWidth(circleWidth);radius = 100;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);int x = getMeasuredWidth()/2;int y = getMeasuredHeight()/2;radius = getMeasuredWidth()/2-10;if(x<150){mPaint.setColor(Color.RED);}if(x>150 && x<250) {mPaint.setColor(Color.GREEN);}if(x>250 && x<350) {mPaint.setColor(Color.BLUE);}canvas.drawCircle(x, y, radius, mPaint);}public void startPlay() {Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.wave_aimation);this.startAnimation(animation);}
}

上面的代码中的多个if判断条件是为了依据不同的宽度来设置不同的画笔颜色，这样可以画出不同颜色的圆环来。代码中使用的是视图动画集，下面是动画集中的代码：

<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillAfter="true"android:duration="3000"><scaleandroid:fromXScale="1.0"android:fromYScale="1.0"android:toXScale="1.5"android:toYScale="1.5"android:pivotX="50%"android:pivotY="50%"></scale><alphaandroid:fromAlpha="1"android:toAlpha="0"></alpha>
</set>