当前位置:首页 > 安卓源码 > 技术博客 >

android 自定义酷炫进度条动画

时间:2019-07-03 22:52 来源:互联网 作者:源码搜藏 浏览: 收藏 挑错 推荐 打印

公司项目用到一个进度条动画,需要自己绘制从0加载到100的情况,而且效果需要很酷炫。最后是采用了lottie动画+一部分自定义View来实现,拆分了出来。过后,觉得其实自己实现这样的一个效果也不难,便开始了以下的尝试。先看下效果 分析 1.分析下:最外层是一

公司项目用到一个进度条动画,需要自己绘制从0加载到100的情况,而且效果需要很酷炫。最后是采用了lottie动画+一部分自定义View来实现,拆分了出来。过后,觉得其实自己实现这样的一个效果也不难,便开始了以下的尝试。先看下效果

android 自定义酷炫进度条动画

分析

1.分析下:最外层是一个由小圆点顺时针旋转的圆、第二层是直接一个圆、第三层有两层:内层是由矩形逆时针旋转的圆,外层是一个圆环、最后是文字展示。
2.实现思路是这样:分成多个View来实现,第一层圆点是一个View,绘制完成是使用ObjectAnimator进行旋转;第二层和第三层的外层和文字是一个View,第三层内层矩形是一个View,同样是绘制完成使用ObjectAnimator旋转。(这里为何分成三个View咧,因为涉及到旋转动画,我想实现旋转的时候,是对画布canvas对象进行旋转,而在一个View里只有一个画布canvas对象,如果所有都绘制在一个canvas上,则旋转的时候就都会旋转,实现不了我要的效果。如果读者有更好的解决方案欢迎提出)

android 自定义酷炫进度条动画

开干

第一部分

1.进度条动画 感谢这篇博客作者给我提供了很好的思路,让我举一反三,如果读者第一部分看的很模糊的话,可以结合这篇博客享用
2.第一层圆点和第三层内层矩形应该怎么绘制?这里实现大同小异放在一起说

android 自定义酷炫进度条动画

3.看到此图不用望而生畏,其实很简单,我们最终在画布上绘制的还是一个一个的圆,蓝色圆是真正要绘制的,空白圆是间隔距离,不需要绘制出来。现在总共是100个蓝色圆,100个空心圆,每个圆占据的角度是360/200=1.8度;绘制完蓝色圆以后,调用canvas.ratate()将画布旋转3.6度到下一个蓝色圆圆心位置开始绘制圆,最终就有100个蓝色圆了。
4.怎么绘制蓝色圆?需要确定蓝色圆的圆心位置和半径。我们可以在onMeasure()中拿到View的width和height,除以2得到就是圆心坐标(centerX,centerY),R0就是宽或者高/2可以得到的半径,我们要求出r:

>R1 + r = R0
R1 * sin0.9° = r
由以上两式可以得出:r = (R0*sin0.9°)/(1+sin0.9°)——R0已知
小蓝圆的圆心为:(centerX,centerY-R0+r)

5.这样就可以绘制出来了,这里把sin0.9°提高到sin1°,让蓝色圆大一点。
关键代码如下:(为了美观,我将100个蓝色小圆改成了50个,而且每次旋转3.62=7.2度,也就是隔开了三个白色小圆的距离,绘制50次,每次转过了7.2度,50 7.2=360度,每次都绘制一个蓝色圆,最后是50个小蓝圆)

android 自定义酷炫进度条动画

@Override
    protected void onDraw(Canvas canvas) {
        Log.i();
        super.onDraw(canvas);

        mSin_1 = () Math.sin(Math.toRadians(1));
        // 大圆半径
         outerRadius = (getWidth() < getHeight() ? getWidth() : getHeight()) / 2f;
        //小圆点半径
         dotRadius = mSin_1 * outerRadius / (1 + mSin_1);
         centerX = getWidth() / 2f;
         centerY = getHeight() / 2f;

        mPaint.setStyle(Paint.Style.FILL);
        int count = 0;
        while(count++ < 50) {
            canvas.drawCircle(centerX, centerY - outerRadius + dotRadius, dotRadius, mPaint);
            canvas.rotate(7.2f, centerX, centerY);
        }
    }

第二部分

1.绘制矩形形成的圆,原理也是一样的,只不过把绘制小蓝圆变成绘制矩形。绘制矩形需要确定左上角和右下角这两个点的位置就可以了。然后将画布旋转某一角度值继续绘制即可。这里绘制了50次,每次旋转10度,总共是500度>360度,保证大于360度即可,多余的会重复覆盖,但如果小于360度,就会导致绘制残缺。

android 自定义酷炫进度条动画

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mPaint.setShader(null);
        mPaint.setAntiAlias(); // 抗锯齿
        mPaint.setDither(); // 防抖动

        // 半径,这里减去40是将半径缩小40
         outerRadius = (getWidth() < getHeight() ? getWidth() : getHeight()) / 2f-40;
         centerX = getWidth() / 2f;
         centerY = getHeight() / 2f;

        mPaint.setStyle(Paint.Style.FILL);
        int count = 0;
        int des = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 6, getResources().getDisplayMetrics());
        while(count++ < 50) {
            canvas.drawRect(centerX-3,centerY-outerRadius,centerX+3,centerY-outerRadius+des,
                    mPaint);
            canvas.rotate(10.0f, centerX, centerY);
        }
    }

第三部分

1.绘制圆环和圆,绘制文字这几个是放到一个View处理的,因为不用涉及到旋转,所以可以放到一起绘制。这部分是参考了另外一篇博客,有兴趣的读者也可以享用 自定义进度条
2.画圆这个比较简单不说,圆环的话,其实就是画圆弧,画圆弧的时候会先确定一个外接矩形,设置画笔类型为描边circlePaint.setStyle(Paint.Style.STROKE);同时不包含圆心,就可以了。具体的可以看下这篇博客 drawArc画圆弧介绍 ,这里不便展开。

private void drawCircle(Canvas canvas, int center, int radius)
    {
        //画一个简单的圆
        firstPaint.setShader(null); // 清除上一次的shader
        firstPaint.setColor(firstColor); // 设置底部圆环的颜色,这里使用第一种颜色
        firstPaint.setStyle(Paint.Style.STROKE); // 设置绘制的圆为空心
        canvas.drawCircle(center, center, radius+40, firstPaint); 
        
        //画一个圆环
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        circlePaint.setShader(null);
        // 绘制颜色渐变圆环
        // shader类是Android在图形变换中非常重要的一个类。Shader在三维软件中我们称之为着色器,其作用是来给图像着色。
        LinearGradient linearGradient = new LinearGradient(circleWidth, circleWidth, getMeasuredWidth()
                - circleWidth, getMeasuredHeight() - circleWidth, colorArray, null, Shader.TileMode.MIRROR);
        circlePaint.setShader(linearGradient);
        //这里注意设置为描边类型
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setShadowLayer(10, 10, 10, Color.RED);
        circlePaint.setColor(secondColor); // 设置圆弧的颜色
        circlePaint.setStrokeCap(Paint.Cap.ROUND); // 把每段圆弧改成圆角的
        // 计算每次画圆弧时扫过的角度,这里计算要注意分母要转为类型,否则alphaAngle永远为0
        alphaAngle = currentValue * 360.0f / maxValue * 1.0f;
        canvas.drawArc(oval, -90, alphaAngle, , circlePaint);
    }

3.可以看到绘制圆环的时候,用到alphaAngle,这个是扫过的角度,根据currentValue当前的进度值,得出当前扫过的角度。maxValue是100最大进度值。更新进度的时候会调用以下这个方法进行更新,在invalidate()被调用后,View会进行重绘,回调onDraw()方法,得出新的alphaAngle角度值,绘制出对应进度的圆环。

Progress(int progress)
    {
        int percent = progress * maxValue / 100;
        if(percent < 0)
        {
            percent = 0;
        }
        if(percent > 100)
        {
            percent = 100;
        }
        this.currentValue = percent;
        //更新View
        invalidate();
    }

4.绘制文字也是同样的道理,通过setProgress()方法来更新currentValue值。这里绘制文字有个注意的地方:文字的绘制位置居中。drawText()方法的第二三个参数分别是Text文字x,y坐标,这里为什么设置为center和baseline这两个值是有原因的,墙裂推荐这篇博客了解原因:

private void drawText(Canvas canvas, int center, int radius)
    {
         result = (currentValue * 100.0f / maxValue * 1.0f); // 计算进度
        String percent = String.format(;

        textPaint.setTextAlign(Paint.Align.CENTER); // 设置文字居中,文字的x坐标要注意
        textPaint.setColor(textColor); // 设置文字颜色
        textPaint.setTextSize(40); // 设置要绘制的文字大小
        textPaint.setStrokeWidth(0); // 注意此处一定要重新设置宽度为0,否则绘制的文字会重叠
        Rect bounds = new Rect(); // 文字边框
        textPaint.getTextBounds(percent, 0, percent.length(), bounds); // 获得绘制文字的边界矩形
        Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt(); // 获取绘制Text时的四条线
        int baseline = center + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; 
        canvas.drawText(percent, center, baseline, textPaint); // 绘制表示进度的文字
    }

总结

1.写到这其实还没完,只是对里面的重点剖析了下,剩下的细节读者可以看下源码,我也封装成了一个依赖库,有需要可以使用。对应的demo使用放到github上,喜欢的可以点个star。

  • 在项目的build.gradle中添加:

allprojects {
    repositories {
        maven { url  }
    }
}
  • 在module的build.gradle中添加:

implementation 'com.github.guoxiaozhou:AnimationDemo:0.5'
  • 具体使用demo地址:
    https://github.com/guoxiaozhou/AnimationDemo

android 自定义酷炫进度条动画 转载http://www.codesocang.com/appboke/40603.html

技术博客阅读排行

最新文章