自定义View实现横向的双水波纹进度条

·  阅读 1489
自定义View实现横向的双水波纹进度条

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金。

网上垂直的水波纹进度条很多,但横向的很少,将垂直的水波纹改为水平的还遇到了些麻烦,现在完善后发布出来,希望遇到的人少躺点坑。

思路分析

整体效果可分为三个,绘制圆角背景和圆角矩形,绘制第一条和第二条水波浪,根据自定义进度变化效果。

功能实现

1.绘制圆角背景和圆角矩形边框

圆角矩形边框:

private RectF rectBorder;
if (rectBorder == null) {
    rectBorder = new RectF(0.5f * dp1, 0.5f * dp1, waveActualSizeWidth - 0.5f * dp1, waveActualSizeHeight - 0.5f * dp1);
}
canvas.drawRoundRect(rectBorder, dp27, dp27, borderPaint);
复制代码

我们创建一个新的画布,然后在画布里画上圆角矩形背景和第一条和第二条水波浪:

//这里用到了缓存 根据参数创建新位图
if (circleBitmap == null) {
    circleBitmap = Bitmap.createBitmap(waveActualSizeWidth, waveActualSizeHeight, Bitmap.Config.ARGB_8888);
}
//以该bitmap为底创建一块画布
if (bitmapCanvas == null) {
    bitmapCanvas = new Canvas(circleBitmap);
}
// 圆角矩形背景,为了能让波浪填充完整个圆形背景
if (rectBg == null) {
    rectBg = new RectF(0, 0, waveActualSizeWidth, waveActualSizeHeight);
}
bitmapCanvas.drawRoundRect(rectBg, dp27, dp27, backgroundPaint);
//裁剪图片
canvas.drawBitmap(circleBitmap, 0, 0, null);
复制代码

2.通过贝塞尔曲线实现双水波

1)实现第一条水波

/**
 * 绘制波浪线
 */
private Path canvasWavePath() {
    //要先清掉路线
    wavePath.reset();
    //起始点移至(0,0) p0 -p1 的高度随着进度的变化而变化
    wavePath.moveTo((currentPercent) * waveActualSizeWidth, -moveDistance);
    //最多能绘制多少个波浪
    //其实也可以用 i < getWidth() ;i+=waveLength来判断 这个没那么完美
    //绘制p0 - p1 绘制波浪线 这里有一段是超出View的,在View右边距的右边 所以是* 2
    for (int i = 0; i < waveNumber * 2; i++) {
        wavePath.rQuadTo(waveHeight, waveLength / 2, 0, waveLength);
        wavePath.rQuadTo(-waveHeight, waveLength / 2, 0, waveLength);
    }
    //连接p1 - p2
    wavePath.lineTo(0, waveActualSizeHeight);
    //连接p2 - p0
    wavePath.lineTo(0, 0);
    //封闭起来填充
    wavePath.close();
    return wavePath;
}
复制代码

moveDistance为水波垂直方向移动的距离。
waveLength为水波长度,一个上弧加一个下弧为一个波长。
path的起始点为(0,0)可根据进度动态改变,然后循环画曲线,长度是有几个波浪就是多长,然后连接到view高度的位置,最后到(0,0),形成一个封闭的区域,这样就实现了一个填充的水波效果。

2)绘制第二条水波,第二条水波和第一条类似,只是起始点变了:

/**
 * 绘制第二层波浪
 */
private Path canvasSecondPath() {
    secondWavePath.reset();
    //初始点移动到下方
    secondWavePath.moveTo((currentPercent) * waveActualSizeWidth, waveActualSizeHeight + moveDistance);
    for (int i = 0; i < waveNumber * 2; i++) {
        secondWavePath.rQuadTo(waveHeight, -waveLength / 2, 0, -waveLength);
        secondWavePath.rQuadTo(-waveHeight, -waveLength / 2, 0, -waveLength);
    }
    secondWavePath.lineTo(0, 0);
    secondWavePath.lineTo(0, waveActualSizeHeight);
    secondWavePath.close();
    return secondWavePath;
}
复制代码

3.设置动画使进度和水波纹变化

/**
 * 设置进度
 *
 * @param currentProgress 进度
 * @param duration        达到进度需要的时间
 */
public void setProgress(int currentProgress, long duration, AnimatorListenerAdapter listenerAdapter) {
    float percent = currentProgress * 1f / maxProgress;
    this.currentProgress = currentProgress;
    //从0开始变化
    currentPercent = 0;
    moveDistance = 0;
    mProgressAnimator = ValueAnimator.ofFloat(0, percent);
    //设置动画时间
    mProgressAnimator.setDuration(duration);
    //让动画匀速播放,避免出现波浪平移停顿的现象
    mProgressAnimator.setInterpolator(new LinearInterpolator());
    mProgressAnimator.addUpdateListener(listener);
    mProgressAnimator.addListener(listenerAdapter);
    mProgressAnimator.start();

    // 波浪线
    startWaveAnimal();
}

/**
 * 波浪动画
 */
private void startWaveAnimal() {
    //动画实例化
    if (waveProgressAnimator == null) {
        waveProgressAnimator = new WaveProgressAnimal();
        //设置动画时间
        waveProgressAnimator.setDuration(2000);
        //设置循环播放
        waveProgressAnimator.setRepeatCount(Animation.INFINITE);
        //让动画匀速播放,避免出现波浪平移停顿的现象
        waveProgressAnimator.setInterpolator(new LinearInterpolator());
        //当前视图开启动画
        this.startAnimation(waveProgressAnimator);
    }
}
复制代码

其中波浪动画是通过改变moveDistance的值改变纵坐标达到,进度主要是通过改变百分比currentPercent改变波浪的横坐标达到。

结语

通过这个项目,主要可以学到贝塞尔曲线,也可以搭配上不同的动画,搞定产品的各种交互效果。对应的文件:HorizontalWaveProgressView.java

分类:
Android
标签:
分类:
Android
标签: