Android水波纹效果
需要到水波纹效果的场景还蛮少的。万一刚好你需要呢
一、思路:
自定义组件SpreadView
二、效果图:
看视频更直观点:
Android轮子分享-水波纹效果
三、关键代码:
public class SpreadView extends View {private Paint centerPaint; //中心圆paintprivate int radius = 100; //中心圆半径 pxprivate Paint spreadPaint; //扩散圆paintprivate float centerX;//圆心xprivate float centerY;//圆心yprivate int distance = 5; //每次圆递增间距 pxprivate int maxRadius; //扩散波纹圆最大半径 pxprivate int radiusDifference = 120; // 二个扩散圈之间距离差private boolean isNeedCenter = false; // 是否需要绘画中心圆private int delayMilliseconds = 25;//扩散延迟间隔,毫秒,越大扩散越慢private List<Integer> spreadRadius = new ArrayList<>();//扩散圆层级数,元素为扩散的距离private List<Integer> alphas = new ArrayList<>();//对应每层圆的透明度private int alphaReduce ; //每次透明度减少量private int spreadStartTransparency = 255; // 扩散波纹最开始的透明度,最大255为完全不透明public SpreadView(Context context) {this(context, null, 0);}public SpreadView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public SpreadView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SpreadView, defStyleAttr, 0);radius = a.getInt(R.styleable.SpreadView_spread_radius, radius);maxRadius = a.getInt(R.styleable.SpreadView_spread_max_radius, getScreenWidth(getContext(),false)/2);isNeedCenter = a.getBoolean(R.styleable.SpreadView_is_need_center, isNeedCenter);int centerColor = a.getColor(R.styleable.SpreadView_spread_center_color, ContextCompat.getColor(context, R.color.c_main));int spreadColor = a.getColor(R.styleable.SpreadView_spread_spread_color, ContextCompat.getColor(context, R.color.white));distance = a.getInt(R.styleable.SpreadView_spread_distance, distance);spreadStartTransparency = a.getInt(R.styleable.SpreadView_spread_start_transparency, spreadStartTransparency);a.recycle();if(isNeedCenter){centerPaint = new Paint();centerPaint.setColor(centerColor);centerPaint.setAntiAlias(true);}alphas.add(spreadStartTransparency);spreadRadius.add(0);spreadPaint = new Paint();spreadPaint.setAntiAlias(true);spreadPaint.setAlpha(spreadStartTransparency);spreadPaint.setColor(spreadColor);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);//圆心位置centerX = w / 2;centerY = h / 2;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if(alphaReduce == 0){int num = (maxRadius - radius)/distance;alphaReduce = num > 1 ? Math.max((spreadStartTransparency / (num - 1)), 1) : spreadStartTransparency;}for (int i = 0; i < spreadRadius.size(); i++) {int alpha = alphas.get(i);spreadPaint.setAlpha(alpha);int width = spreadRadius.get(i);//绘制扩散的圆canvas.drawCircle(centerX, centerY, radius + width, spreadPaint);//每次扩散圆半径递增,圆透明度递减if (alpha > 0) {alpha = alpha - alphaReduce > 0 ? alpha - alphaReduce : 1;alphas.set(i, alpha);spreadRadius.set(i, width + distance);}}//当上一个扩散圆增加的半径达到此值时添加新扩散圆if (spreadRadius.get(spreadRadius.size() - 1) > radiusDifference) {spreadRadius.add(0);alphas.add(spreadStartTransparency);}//删除最先绘制的圆,即最外层的圆if (alphas.get(0) == 1) {alphas.remove(0);spreadRadius.remove(0);}//中间的圆if(isNeedCenter){canvas.drawCircle(centerX, centerY, radius, centerPaint);}
四、项目demo源码结构图:
有问题或者需要完整源码demo的私信我,我每天都看私信的