根据数值大小(主要用于音量大小)动态展示水波纹扩散范围以及透明度变化
网上水波纹效果比较多,但是根据业务要求需要动态变化水波纹。
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import com.liveproject.mainLib.R;
import com.liveproject.mainLib.utils.DisplayUtils;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
public class MyWaterRippleView extends View{
private Paint centerPaint; //中心圆paint
private int radius = 100; //中心圆半径
private Paint spreadPaint; //扩散圆paint
private float centerX;//圆心x
private float centerY;//圆心y
private int distance = 5; //每次圆递增间距
private int maxRadius = 80; //最大圆半径
private int delayMilliseconds = 33;//扩散延迟间隔,越大扩散越慢
private Context c;
private int maxAlpha=250;
public MyWaterRippleView(Context context) {
this(context,null);
}
public MyWaterRippleView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public MyWaterRippleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.c=context;
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SpreadView, defStyleAttr, 0);
radius = DisplayUtils.dip2px(c,a.getInt(R.styleable.SpreadView_spread_radius, radius));
maxRadius = DisplayUtils.dip2px(c,a.getInt(R.styleable.SpreadView_spread_max_radius, maxRadius));
int centerColor = a.getColor(R.styleable.SpreadView_spread_center_color, ContextCompat.getColor(context, R.color.colorAccent));
int spreadColor = a.getColor(R.styleable.SpreadView_spread_spread_color, ContextCompat.getColor(context, R.color.colorAccent));
distance =DisplayUtils.dip2px(c,a.getInt(R.styleable.SpreadView_spread_distance, distance)) ;
maxAlpha=a.getInt(R.styleable.SpreadView_spread_max_alpha,maxAlpha);
delayMilliseconds=a.getInt(R.styleable.SpreadView_spread_delay_milliseconds,delayMilliseconds);
a.recycle();
centerPaint = new Paint();
centerPaint.setColor(centerColor);
centerPaint.setAntiAlias(true);
//最开始不透明且扩散距离为0
//alphas.add(maxAlpha);
//spreadRadius.add(0);
spreadPaint = new Paint();
spreadPaint.setAntiAlias(true);
spreadPaint.setAlpha(maxAlpha);
spreadPaint.setColor(spreadColor);
//spreadPaint.setStyle(Paint.Style.STROKE);
minValue=(maxRadius-radius)/3+radius;//为了最小得值都有扩散效果
Log.i("WaterRippleView","radius="+radius+";;"+"maxRadius="+maxRadius+";;"+"distance="+distance+";;"+"maxAlpha=="+maxAlpha);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//圆心位置
centerX = w / 2;
centerY = h / 2;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < VoiceCirleList.size(); i++) {
VoiceCircle voiceCircle=VoiceCirleList.get(i);
int width = voiceCircle.getCurValue();
//每次扩散圆半径递增,圆透明度递减
if (width+distance<voiceCircle.maxValue){
width=width+distance;
}else {
width=voiceCircle.maxValue;
}
voiceCircle.setCurValue(width);
Log.i("qiuqiu","wwww"+voiceCircle.toString());
//计算透明度
int AlphaWidth=voiceCircle.getAlphaWidth();
if (AlphaWidth>width){
AlphaWidth=AlphaWidth+distance*3;
}else {
AlphaWidth=AlphaWidth+distance;
}
if (AlphaWidth>maxRadius){
AlphaWidth=maxRadius;
}
voiceCircle.setAlphaWidth(AlphaWidth);
Log.i("qiuqiu","AlphaWidth="+AlphaWidth+"=="+maxRadius);
spreadPaint.setAlpha(getCurColor(AlphaWidth));
canvas.drawCircle(centerX, centerY, width, spreadPaint);
}
Iterator<VoiceCircle> iterator = VoiceCirleList.iterator();
while (iterator.hasNext()){
VoiceCircle voiceCircle= iterator.next();
if (voiceCircle.getAlphaWidth()==maxRadius){
iterator.remove();
}
}
//中间的圆
canvas.drawCircle(centerX, centerY, radius, centerPaint);
postInvalidateDelayed(delayMilliseconds);
}
private int minValue;//最小扩散到得值;
public static int minReciveValue=10;//最小监听得值
private int maxReciveValue=200;//最大监听得值
private int getA(int a){
int x= (int) (((a-minReciveValue)/(maxReciveValue*1f-minReciveValue))*(maxRadius-minValue));
return x;
}
private int getCurColor(int w){
int alpha= (int) (((maxRadius-w)/(maxRadius-radius*1f))*maxAlpha);
Log.i("qiuqiu13",alpha+"");
Log.i("qiuqiu14",w+"=="+radius);
return alpha;
}
public void reciveVoice(int maxValue){
maxValue=getA(maxValue);
Log.i("qiuqiu12",maxValue+"");
VoiceCircle voiceCircle=new VoiceCircle();
if (maxValue+minValue<maxRadius){
voiceCircle.setMaxValue(maxValue+minValue);
}else {
voiceCircle.setMaxValue(maxRadius);
}
voiceCircle.setCurValue(radius);
voiceCircle.setAlphaWidth(radius);
VoiceCirleList.add(voiceCircle);
// postInvalidateDelayed(delayMilliseconds);//
// MyWaterRippleView.this.invalidate();//重绘更新view
}
private List<VoiceCircle> VoiceCirleList = new ArrayList<>();//扩散圆层级数,元素为扩散的距离
class VoiceCircle{
int maxValue;
int curValue;
int AlphaWidth;
public int getMaxValue() {
return maxValue;
}
public int getCurValue() {
return curValue;
}
public void setMaxValue(int maxValue) {
this.maxValue = maxValue;
}
public void setCurValue(int curValue) {
this.curValue = curValue;
}
public int getAlphaWidth() {
return AlphaWidth;
}
public void setAlphaWidth(int alphaWidth) {
AlphaWidth = alphaWidth;
}
@Override
public String toString() {
return "VoiceCircle{" +
"maxValue=" + maxValue +
", curValue=" + curValue +
'}';
}
}
在res/values/attrs.xml中加入
<declare-styleable name="SpreadView">
<!--中心圆颜色-->
<attr name="spread_center_color" format="color" />
<!--中心圆半径-->
<attr name="spread_radius" format="integer" />
<!--扩散圆颜色-->
<attr name="spread_spread_color" format="color" />
<!--扩散间距-->
<attr name="spread_distance" format="integer" />
<!--扩散最大半径-->
<attr name="spread_max_radius" format="integer" />
<!--扩散延迟间隔-->
<attr name="spread_delay_milliseconds" format="integer" />
<attr name="spread_max_cirlce" format="integer" />
<!--最高得透明的度-->
<attr name="spread_max_alpha" format="integer" />
</declare-styleable>
在layout.xml中使用如下
<com.xxx.xxxx.weidget.MyWaterRippleView
android:clickable="false"
android:id="@+id/myWrv"
android:layout_width="120dp"
android:layout_height="120dp"
app:spread_center_color="#0ada15"
app:spread_distance="1"
app:spread_max_radius="60"
app:spread_radius="30"
app:spread_spread_color="@color/white"
app:spread_max_alpha="75"/>
在Activity中使用
MyWaterRippView myWrv=findViewById(R.id.myWrv);
//根据数值大小变化
myWrv.reciveVoice("你的数值大小“);
注:觉得适用的话,帮忙给个赞,可以联系qq: 874021812 给源码