android添加滚动条加载的动画效果,Android实现水波进度加载

之前写过一些比这个复杂的的自定义view，刚打算做这个的时候想，这个界面元素少，很快就画完了吧，那就预算3个小时搞定吧。结果有点小看了，花了我半天时间才做完，主要就是卡在了波浪平移的理解上，背景移动一定周期以后，恢复原位但要与当前背景重合，以达到连续移动的效果，这是做2D游戏常用的做法。

国际惯例，先上效果先上效果

实现思路

1.用path绘制一个封闭的水池以及水面的曲线波浪

2.用属性动画修改水池高度让水涨起来

3.让波，浪起来：画2倍view宽的波浪，实时改变path起始点，让波浪向右平移，动画结束回到原起点无限循环

4.绘制中心文字和滚动数字

6.绘制前景圆形，设置重叠显示模式，将外形呈圆形

代码实现过程

先过目一下总共要声明哪些变量常量。

/**

* 波浪paint

*/

private Paint wavePaint;

/**

* 圆环paint

*/

private Paint circlePaint;

/**

* 圆环paint

*/

private Paint ringPaint;

/**

* 文本paint

*/

private Paint textPaint;

private Path wavePath;

private int waveWidth;

/**

* 波浪幅度

*/

private float waveHeight;

/**

* 水面波浪数，在为偶数的情况下，波浪才会按周期平移

*/

private final int waveCount = 2;

/**

* 当前数值

*/

private int curNum;

/**

* 总数值

*/

private int totalNum;

/**

* 最终进度比例

*/

private float percent;

/**

* 当前轮水波移动比例

*/

private int movePercent;

/**

* 该view尺寸大小

*/

private int rectSize;

/** 动画时长 */

private final int ANIM_DURATION = 2000;

private float moveDistance;

/**

* 缓存bitmap

*/

private Bitmap bitmap;

private Canvas bitmapCanvas;

private int ringWidth;

/**

* 当前量

*/

private int num;

从-rectWidth位置开始为path起点，绘制一个波浪曲线加水池的一个梯形。

private Path setWavePath() {

wavePath.reset();

wavePath.moveTo(-moveDistance, rectSize * (1 - percent)); //起始点，y值为水流的高度

//绘制多段波浪

for (int i = 0; i < waveCount * 2; i++) {

wavePath.rQuadTo(waveWidth / 2, waveHeight, waveWidth, 0);

wavePath.rQuadTo(waveWidth / 2, -waveHeight, waveWidth, 0);

}

wavePath.lineTo(rectSize, rectSize);

wavePath.lineTo(0, rectSize);

wavePath.close();

return wavePath;

}

所以实现波浪平移，实际方式是这样的：

实现水面上涨效果，就是属性动画实时修改起点的高度。

public void setProgressAnim(int num) {

ValueAnimator valueAnimator = ValueAnimator.ofInt(0, num);

valueAnimator.setDuration(ANIM_DURATION);

valueAnimator.setInterpolator(new DecelerateInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

curNum = (int) animation.getAnimatedValue();

percent = (float) curNum / totalNum; //实时更新进度状态

}

});

valueAnimator.start();

}

实现平移动画，用属性动画实时修改起点的水平位置，从-rectSize到0周期循环,rectSize为view的宽度。

private void setWaveMoveAnim() {

ValueAnimator valueAnimator = ValueAnimator.ofInt(100, 0);

valueAnimator.setDuration(ANIM_DURATION);

valueAnimator.setInterpolator(new LinearInterpolator());

valueAnimator.setRepeatCount(ValueAnimator.INFINITE); //无限循环

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

movePercent = (int) animation.getAnimatedValue();

moveDistance = (float) movePercent / 100 * rectSize;

postInvalidate();

}

});

valueAnimator.start();

}

绘制圆内文字以及设置到准确位置。

private void drawContentText(Canvas canvas) {

Rect rect = new Rect();

String content;

textPaint.setTextSize(160);

content = num + "M";

textPaint.getTextBounds(content, 0, content.length(), rect);

int numHeight = rect.height();

canvas.drawText(content, getWidth() / 2 - rect.width() / 2, getHeight() / 2 + numHeight / 2, textPaint);

textPaint.setTextSize(60);

content = "剩余流量";

textPaint.getTextBounds(content, 0, content.length(), rect);

canvas.drawText(content, getWidth() / 2 - rect.width() / 2, getHeight() / 2 - numHeight, textPaint);

textPaint.setTextSize(55);

content = "共" + (float) totalNum / 1024 + "GB";

textPaint.getTextBounds(content, 0, content.length(), rect);

canvas.drawText(content, getWidth() / 2 - rect.width() / 2, getHeight() / 2 + numHeight + dp2px(getContext(), 25), textPaint);

}

缓存bitmap，将两个canvas重叠，选取显示前景形状，背景颜色的模式。这里使用paint设置PorterDuffXfermode的Mode.SRC_IN模式。

private void drawBitmap(Canvas canvas) {

bitmap = Bitmap.createBitmap(rectSize, rectSize, Bitmap.Config.ARGB_8888);

bitmapCanvas = new Canvas(bitmap);

bitmapCanvas.drawCircle(rectSize / 2, rectSize / 2, rectSize / 2 - ringWidth, circlePaint);

bitmapCanvas.drawPath(setWavePath(), wavePaint);

canvas.drawBitmap(bitmap, 0, 0, null);

}

总共16中重叠显示模式设置，更详细的用法，可搜索"setXfermode"。

WaveProgressView类完整代码：

/**

* create by libo

* create on 2020/7/28

* description

*/

public class WaveProgressView extends View {

/**

* 波浪paint

*/

private Paint wavePaint;

/**

* 圆环paint

*/

private Paint circlePaint;

/**

* 圆环paint

*/

private Paint ringPaint;

/**

* 文本paint

*/

private Paint textPaint;

private Path wavePath;

private int waveWidth;

/**

* 波浪幅度

*/

private float waveHeight;

/**

* 水面波浪数，在为偶数的情况下，波浪才会按周期平移

*/

private final int waveCount = 2;

/**

* 当前数值

*/

private int curNum;

/**

* 总数值

*/

private int totalNum;

/**

* 最终进度比例

*/

private float percent;

/**

* 当前轮水波移动比例

*/

private int movePercent;

/**

* 该view尺寸大小

*/

private int rectSize;

/** 动画时长 */

private final int ANIM_DURATION = 2000;

private float moveDistance;

/**

* 缓存bitmap

*/

private Bitmap bitmap;

private Canvas bitmapCanvas;

private int ringWidth;

/**

* 当前量

*/

private int num;

public WaveProgressView(Context context) {

super(context);

init();

}

public WaveProgressView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

init();

}

private void init() {

wavePaint = new Paint();

wavePaint.setColor(getResources().getColor(R.color.mask_green));

wavePaint.setStyle(Paint.Style.FILL);

wavePaint.setAntiAlias(true);

wavePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

circlePaint = new Paint();

circlePaint.setAntiAlias(true);

circlePaint.setColor(getResources().getColor(R.color.green));

ringPaint = new Paint();

ringPaint.setAntiAlias(true);

ringPaint.setColor(getResources().getColor(R.color.deep_green));

ringPaint.setStyle(Paint.Style.STROKE);

ringWidth = dp2px(getContext(), 12);

ringPaint.setStrokeWidth(ringWidth);

textPaint = new Paint();

textPaint.setColor(getResources().getColor(R.color.white));

textPaint.setAntiAlias(true);

wavePath = new Path();

setValue(634, 1024); //设置当前流量和总流量

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

waveWidth = getMeasuredWidth() / waveCount;

waveHeight = dp2px(getContext(), 18);

rectSize = getMeasuredWidth();

moveDistance = rectSize;

setMeasuredDimension(rectSize, rectSize); //宽高大小一致

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

drawBitmap(canvas);

//绘制外圆环

RectF rectF = new RectF(ringWidth / 2, ringWidth / 2, rectSize - ringWidth / 2, rectSize - ringWidth / 2);

canvas.drawArc(rectF, 0, 360, false, ringPaint);

drawContentText(canvas);

}

private Path setWavePath() {

wavePath.reset();

wavePath.moveTo(-moveDistance, rectSize * (1 - percent)); //起始点，y值为水流的高度

//绘制多段波浪

for (int i = 0; i < waveCount * 2; i++) {

wavePath.rQuadTo(waveWidth / 2, waveHeight, waveWidth, 0);

wavePath.rQuadTo(waveWidth / 2, -waveHeight, waveWidth, 0);

}

wavePath.lineTo(rectSize, rectSize);

wavePath.lineTo(0, rectSize);

wavePath.close();

return wavePath;

}

/**

* 缓存bitmap，将两个canvas重叠，选取显示前景形状，背景颜色的模式

*/

private void drawBitmap(Canvas canvas) {

bitmap = Bitmap.createBitmap(rectSize, rectSize, Bitmap.Config.ARGB_8888);

bitmapCanvas = new Canvas(bitmap);

bitmapCanvas.drawCircle(rectSize / 2, rectSize / 2, rectSize / 2 - ringWidth, circlePaint);

bitmapCanvas.drawPath(setWavePath(), wavePaint);

canvas.drawBitmap(bitmap, 0, 0, null);

}

/**

* 设置当前值和总值，并开启动画

*

* @param curNum

* @param totalNum

*/

public void setValue(int curNum, int totalNum) {

this.totalNum = totalNum;

setProgressAnim(curNum);

setWaveMoveAnim();

runWithAnimation(curNum);

}

/**

* 水波上涨动画

*/

public void setProgressAnim(int num) {

ValueAnimator valueAnimator = ValueAnimator.ofInt(0, num);

valueAnimator.setDuration(ANIM_DURATION);

valueAnimator.setInterpolator(new DecelerateInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

curNum = (int) animation.getAnimatedValue();

percent = (float) curNum / totalNum; //实时更新进度状态

}

});

valueAnimator.start();

}

/**

* 波浪平移动画

*/

private void setWaveMoveAnim() {

ValueAnimator valueAnimator = ValueAnimator.ofInt(100, 0);

valueAnimator.setDuration(ANIM_DURATION);

valueAnimator.setInterpolator(new LinearInterpolator());

valueAnimator.setRepeatCount(ValueAnimator.INFINITE); //无限循环

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

movePercent = (int) animation.getAnimatedValue();

moveDistance = (float) movePercent / 100 * rectSize;

postInvalidate();

}

});

valueAnimator.start();

}

/**

* 设置文字滚动动画

*

* @param number

*/

public void runWithAnimation(int number) {

ObjectAnimator objectAnimator = ObjectAnimator.ofInt(this, "num", 0, number);

objectAnimator.setDuration(ANIM_DURATION/2);

objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

objectAnimator.start();

objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

postInvalidate();

}

});

}

/**

* 绘制圆内文字以及设置到准确位置

*/

private void drawContentText(Canvas canvas) {

Rect rect = new Rect();

String content;

textPaint.setTextSize(160);

content = num + "M";

textPaint.getTextBounds(content, 0, content.length(), rect);

int numHeight = rect.height();

canvas.drawText(content, getWidth() / 2 - rect.width() / 2, getHeight() / 2 + numHeight / 2, textPaint);

textPaint.setTextSize(60);

content = "剩余流量";

textPaint.getTextBounds(content, 0, content.length(), rect);

canvas.drawText(content, getWidth() / 2 - rect.width() / 2, getHeight() / 2 - numHeight, textPaint);

textPaint.setTextSize(55);

content = "共" + (float) totalNum / 1024 + "GB";

textPaint.getTextBounds(content, 0, content.length(), rect);

canvas.drawText(content, getWidth() / 2 - rect.width() / 2, getHeight() / 2 + numHeight + dp2px(getContext(), 25), textPaint);

}

public int getNum() {

return num;

}

public void setNum(int num) {

this.num = num;

}

private int dp2px(Context context, float dp) {

final float scale = context.getResources().getDisplayMetrics().density;

return (int) (dp * scale + 0.5f);

}

}

打完收工，该view还可做扩展的地方：随着波浪升高，波幅可以从大到小；可以实现双波浪效果。