时间:2022-05-12 10:54:11 | 栏目:Android代码 | 点击:次
网上垂直的水波纹进度条很多,但横向的很少,将垂直的水波纹改为水平的还遇到了些麻烦,现在完善后发布出来,希望遇到的人少躺点坑。
整体效果可分为三个,绘制圆角背景和圆角矩形,绘制第一条和第二条水波浪,根据自定义进度变化效果。
圆角矩形边框:
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);
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; }
/** * 设置进度 * * @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