关于自定义view--实现自定义水波纹效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

开发中的东西太多，怕自己忘记了，简单记录一下。

声明：此控件借鉴了大佬的想法，在此感谢大佬提供的支持，我只是把大佬的想法拿出来而已。

ok，废话到此结束，看效果：

分析一下，我们可以看到，图中有两个圆：stop状态下，黄色的默认图，start状态下，水波纹效果的黑色的圆，默认状态下下的圆没什么好说的，直接通过

canvas.drawCircle

绘制一个圆就好，关键是，点击start之后，黑色的圆的水波纹怎么搞。我们可以观察这个水波纹，他是由好多个透明度同的圆来组成的，我们就可以在绘制这个黑色的圆的时候，通过设定他的半径和透明度的方式来实现这样一个效果。

下面还是上代码吧，再下去，我自己都晕了

public class WaterRippleView extends android.support.v7.widget.AppCompatTextView {
/**
* 波纹生成时的半径
*/
private float mWaveRadiusMin;
/**
* 波纹消失前的半径
*/
private float mWaveRadiusMax;
/**
* 每条波纹持续时间
*/
private long mWaveDuration;
private Paint mPaint;
/**
* 中间圆圈的画笔
*/
private Paint mCenterCirclePaint;
/**
* 画笔是否为stroke模式（即线条）
*/
private boolean stroke = false;
/**
* 波纹颜色
*/
private int mWaveColor;
/**
* 波纹停止的颜色
*/
private int mWaveStopColor;
/**
* 波纹动画效果
*/
private Interpolator mInterpolator = new DecelerateInterpolator();
private boolean mIsRunning;
private int mStopCircleColor;
private int mCenterCircleRadius;
/**
* 动画集合
*/
private ArrayList<ValueAnimator> mAnimators; public WaterRippleView(Context context) {
this(context, null);
} public WaterRippleView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
} public WaterRippleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//执行初始化
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.WaterRippleView, 0, defStyleAttr);
mWaveColor = typedArray.getColor(R.styleable.WaterRippleView_color, Color.BLUE);
mStopCircleColor = getResources().getColor(R.color.income_top);//设置停止状态下的颜色--默认值
mWaveStopColor = typedArray.getColor(R.styleable.WaterRippleView_stopColor, Color.BLUE);//设置停止状态下的额颜色--xml
mWaveDuration = typedArray.getInteger(R.styleable.WaterRippleView_duration, 3000);
stroke = typedArray.getBoolean(R.styleable.WaterRippleView_stroke, false);//是否开启水波纹效果
typedArray.recycle();//释放掉TypedArray
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//设置抗锯齿
mPaint.setDither(true); mPaint.setStrokeWidth(3);//设置线的粗细
mAnimators = new ArrayList<>();
mCenterCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCenterCirclePaint.setStyle(Paint.Style.FILL);
mCenterCirclePaint.setColor(mStopCircleColor);
if (stroke) {
mPaint.setStyle(Paint.Style.STROKE);
} else {
mPaint.setStyle(Paint.Style.FILL);
}
} private ValueAnimator createAnimator() {
ValueAnimator animator = new ValueAnimator();
animator.setFloatValues(mWaveRadiusMin, mWaveRadiusMax);
L.d("mWaveRadiusMin", mWaveRadiusMin + "");
L.d("mWaveRadiusMax", mWaveRadiusMax + "");
animator.setDuration(mWaveDuration);
animator.setRepeatCount(-1);
animator.setInterpolator(mInterpolator);
return animator;
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int size = MeasureSpec.getSize(widthMeasureSpec);
mCenterCircleRadius = (int) (size / 2 * 0.8);
mWaveRadiusMin = mCenterCircleRadius;
mWaveRadiusMax = size / 2;
} @Override
protected void onDraw(Canvas canvas) {
int cX = getMeasuredWidth() / 2;
int cY = getMeasuredHeight() / 2;
if (mIsRunning) {
if (mAnimators.size() > 0) {
for (ValueAnimator mAnimator : mAnimators) {
if (mAnimator != null) {
float animatorValue = (float) mAnimator.getAnimatedValue();
L.d("animatorValue", "" + animatorValue);
//设置透明度
int alpha = getAlpha(animatorValue);
mPaint.setAlpha(alpha);
//画水波纹
canvas.drawCircle(cX, cY, animatorValue, mPaint);
}
}
}
}
canvas.drawCircle(cX, cY, mCenterCircleRadius, mCenterCirclePaint);
postInvalidate();
super.onDraw(canvas);
} private void createAnimators() {
for (int i = 0; i < 3; i++) {
mAnimators.add(createAnimator());
}
} //开启动画
public void start() {
if (mIsRunning) {
return;
}
mIsRunning = true;
mPaint.setColor(mWaveColor);
mCenterCirclePaint.setColor(mWaveColor);
if (mAnimators.size() == 0) {
createAnimators();
}
final int size = mAnimators.size();
for (int i = 0; i < size; i++) {
final int index = i;
postDelayed(new Runnable() {
@Override
public void run() {
if (mIsRunning && index < size) {
mAnimators.get(index).start();
}
}
}, (long) (mWaveDuration * index * 1f / size));
}
postInvalidate();
} //是否开启水波纹
public boolean isStart() {
for (ValueAnimator mAnimator : mAnimators) {
if (mAnimator == null && !mAnimator.isRunning()) {
return false;
}
}
return true;
} //关闭动画
public void stop() {
mIsRunning = false;
mPaint.setColor(mStopCircleColor);
mCenterCirclePaint.setColor(mStopCircleColor);
for (ValueAnimator mAnimator : mAnimators) {
if (mAnimator != null) {
mAnimator.cancel(); }
}
mAnimators.clear();
} //设置水波纹颜色
public void setColor(int color) {
mWaveColor = color;
postInvalidate();
} //设计水波纹持续时间
public void setDuration(long duration) {
mWaveDuration = duration;
postInvalidate();
} //是否画笔stroke
public void setStroke(boolean stroke) {
this.stroke = stroke;
postInvalidate();
} public boolean isStroke() {
return stroke;
} //获取水波纹透明度
private int getAlpha(float mRadius) {
int alpha = 1;
if (mWaveRadiusMax > 0) {
alpha = (int) ((1 - (mRadius - mWaveRadiusMin) / (mWaveRadiusMax - mWaveRadiusMin)) * 127);
}
return alpha;
}}

XML中引用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"> <Button
android:id="@+id/click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="start" /> <Button
android:id="@+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="stop" /> <com.zhd.admin.androldlrden.view.WaterRippleView
android:id="@+id/wrv_water"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
app:color="@color/dig_wave"
app:duration="1500"
app:stopColor="#00000000"
app:stroke="false"
app:waveCreateSpeed="500" />
</LinearLayout>

Activity中使用：

public class MainActivity extends AppCompatActivity { private WaterRippleView waterRippleView;
private TextView textView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
waterRippleView = findViewById(R.id.wrv_water);
textView = findViewById(R.id.click);
} public void onClick(View view) {
switch (view.getId()) {
case R.id.click:
waterRippleView.setStroke(true);
waterRippleView.start();
break;
case R.id.stop:
waterRippleView.stop();
break;
}
}
}