安卓通过自定义view实现水波进度条控件

Posted 2022-11-09 yhongm

通过自定义view实现了一个水滴滴落到水波面，溅起水花并且水波流动上涨的进度条控件。之前看到过好多水波流动的进度条，感觉欠缺些东西，就想到了水滴到水平面，溅起水花然后水流动上涨的进度条效果，于是自己动手写了出来。效果如下，视频录制有些卡顿，实际会流畅很多。

---

一，用法：

1,布局文件中添加WaveProgressView，circleColor属性为圆环颜色，waterColor属性为水波水滴的颜色，progress属性为初始的进度

<com.yhongm.wave_progress_view.WaveProgressView
    android:id="@+id/wave_progress_view"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    app:circleColor="#e38854"
    app:progress="0"
    app:waterColor="#5488e3" />

2, WaveProgressView.setProgress()方法设置当前的进度

二，本文实现的逻辑：

1,画水波流动，通过三阶贝塞尔曲线画波形，通过不断的改变waveOffsetX和waveOffsetY的值实现流动的效果

/**
     * 生成水波流动
     *
     * @param begin       水波形开始的位置
     * @param waveLength  水波的长度
     * @param waveOffsetX 水波水平的偏移
     * @param waveOffsetY 水波垂直方向的偏移
     * @return
     */
    private Path getWavePath(float begin, int waveLength, int waveOffsetX, int waveOffsetY) 
        Path mPath = new Path();
        mPath.reset();
        mPath.moveTo(waveLength * begin, mCurrentHeight);
        for (int i = 0; i < mWaveCount; i++) 
            mPath.quadTo(waveLength * (begin + 0.25f) + (i * waveLength) + waveOffsetX, mCurrentHeight + waveOffsetY, (waveLength * (begin + 0.5f) + (i * waveLength) + waveOffsetX), mCurrentHeight);
            mPath.quadTo(waveLength * (begin + 0.75f) + (i * waveLength) + waveOffsetX, mCurrentHeight - waveOffsetY, (waveLength * (begin + 1f) + (i * waveLength) + waveOffsetX), mCurrentHeight);
        
        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(0, mHeight);
        mPath.close();
        return mPath;
      

2,画水滴的形状，水滴的形状是通过一个三角形和一个弧形组成的

/**
     * 水滴的Path
     *
     * @param x    水滴坐标x
     * @param y    水滴坐标y
     * @param size 水滴尺寸
     * @return
     */
    private Path waterDrop(float x, float y, int size) 
        Path mDropPath = new Path();
        mDropPath.moveTo(x - size, y);
        mDropPath.lineTo(x, (float) (y - size * 2.5));
        mDropPath.lineTo(x + size, y);
        mDropPath.addArc(x - size, y - size, x + size, y + size, 0, 180);
        return mDropPath;
    

3,画水滴滴落到水波的效果，就是沿轴Y轴不断的移动水滴

/**
     * 根据位置画水滴
     *
     * @param x
     * @param y
     * @param canvas
     */
    private void drawDropByLocation(Canvas canvas, int x, int y) 
        Path mDropPath = waterDrop(x, y, 30);
        if (y == (mCurrentHeight + 50)) 
            mDropPaint.setAlpha(0);
        
        canvas.drawPath(mDropPath, mDropPaint);
    

4,画最外两侧溅落的水滴，通过三阶贝塞尔曲线模拟左右两侧水滴溅落的路径，随机生成的水滴溅落路径都在这左右两侧内

/**
     * 画两侧水滴飞溅的效果，并且随机生成水滴
     *
     * @param canvas
     * @param x
     * @param y      当前高度
     */
    private synchronized void drawDropSplash(Canvas canvas, int x, int y) 
        PathMeasure mLeftPathMeasure = getOnBothSidesOfPathMeasure(x, y, true);
        PathMeasure mRightPathMeasure = getOnBothSidesOfPathMeasure(x, y, false);

        float[] mLeftPos = new float[2];
        float[] mRightPos = new float[2];
        float[] mLeftTan = new float[2];
        float[] mRightTan = new float[2];

        for (int i = 0; i < 200; i++) 
            float percent = i / 200f;
            mLeftPathMeasure.getPosTan(mLeftPathMeasure.getLength() * percent, mLeftPos, mLeftTan);
            mRightPathMeasure.getPosTan(mRightPathMeasure.getLength() * percent, mRightPos, mRightTan);
            mLeftHashMapPath.put(Math.round(mLeftPos[1]), mLeftPos[0]);
            mRightHashMapPath.put(Math.round(mRightPos[1]), mRightPos[0]);
        

        if (mRandomHashMap.isEmpty() && mRandomHashMap.size() == 0) 
            pushRandomDrag(y);
        
        drawRandomDrag(canvas, x, y, mLeftHashMapPath, mRightHashMapPath);

        drawOnBothSidesOfWaterDrop(canvas, mLeftPathMeasure);

        drawOnBothSidesOfWaterDrop(canvas, mRightPathMeasure);

    

/**
     * 产生随机的水滴
     *
     * @param y
     */
    private void pushRandomDrag(int y) 
        Random r = new Random();
        for (int i = 0; i < 20; i++) 
            int randomY = r.nextInt(y);
            if (mLeftHashMapPath.containsKey(randomY)) 
                Float rightValue = mRightHashMapPath.get(randomY);
                Float leftValue = mLeftHashMapPath.get(randomY);
                int roundLeftValue = Math.round(leftValue);
                int roundRightValue = Math.round(rightValue);
                if (roundRightValue == roundLeftValue) 
                    roundRightValue++;
                
                int roundMinus = Math.round(roundRightValue - roundLeftValue);//左右差值
                float randomX = r.nextInt(roundMinus) + mLeftHashMapPath.get(randomY);//左右差值加上最小值,保证随机值在两者之间
                mRandomHashMap.put(randomX, randomY);

            
        
    

5,随机生成的水滴沿着三阶贝塞尔曲线移动，形成溅落的效果

/**
     * 画随机生成水滴溅起
     *
     * @param canvas
     * @param x
     * @param y
     * @param size
     * @param randomY
     * @param randomX
     */
    private void drawSmartDropOnPath(Canvas canvas, int x, int y, int size, int randomY, float randomX) 
        Path smartDropPath = new Path();
        smartDropPath.moveTo(x, y + 50);
        if (x < randomX) 
            smartDropPath.cubicTo(x, y + 50, randomX + 30, randomY - 20, randomX, randomY);
         else 
            smartDropPath.cubicTo(x, y + 50, randomX - 30, randomY - 20, randomX, randomY);
        
        smartDropPath.lineTo(randomX, randomY + 150);
        PathMeasure pathMeasure = new PathMeasure();
        pathMeasure.setPath(smartDropPath, false);
        float[] pos = new float[2];
        float[] tan = new float[2];
        pathMeasure.getPosTan(pathMeasure.getLength() * mPercent, pos, tan);
        Path path = waterDrop(pos[0], pos[1], size);
        canvas.drawPath(path, mSplashPaint);
    

完整代码详见 点击打开Github本项目 感兴趣的话帮我点个Star