源起

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

分析

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

开干

第一部分

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

  1. 看到此图不用望而生畏,其实很简单,我们最终在画布上绘制的还是一个一个的圆,蓝色圆是真正要绘制的,空白圆是间隔距离,不需要绘制出来。现在总共是 100 个蓝色圆,100 个空心圆,每个圆占据的角度是 360/200=1.8 度;绘制完蓝色圆以后,调用 canvas.ratate() 将画布旋转 3.6 度到下一个蓝色圆圆心位置开始绘制圆,最终就有 100 个蓝色圆了。
  2. 怎么绘制蓝色圆?需要确定蓝色圆的圆心位置和半径。我们可以在 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)

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

@Override
    protected void onDraw(Canvas canvas) {
        Log.i("onMeasure","执行了 onDraw");
        super.onDraw(canvas);
    mSin_1 = (<span class="hljs-built_in">float</span>) Math.sin(Math.toRadians(1));
    // 大圆半径
    <span class="hljs-built_in">float</span> outerRadius = (getWidth() &lt; getHeight() ? getWidth() : getHeight()) / 2f;
    //小圆点半径
    <span class="hljs-built_in">float</span> dotRadius = mSin_1 * outerRadius / (1 + mSin_1);
    <span class="hljs-built_in">float</span> centerX = getWidth() / 2f;
    <span class="hljs-built_in">float</span> centerY = getHeight() / 2f;

    mPaint.setStyle(Paint.Style.FILL);
    int count = 0;
    <span class="hljs-keyword">while</span> (count++ &lt; 50) {
        canvas.drawCircle(centerX, centerY - outerRadius + dotRadius, dotRadius, mPaint);
        canvas.rotate(7.2f, centerX, centerY);
    }
}
复制代码

第二部分

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

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    mPaint.setShader(null);
    mPaint.setAntiAlias(<span class="hljs-literal">true</span>); // 抗锯齿
    mPaint.setDither(<span class="hljs-literal">true</span>); // 防抖动

    // 半径,这里减去40是将半径缩小40
    <span class="hljs-built_in">float</span> outerRadius = (getWidth() &lt; getHeight() ? getWidth() : getHeight()) / 2f-40;
    <span class="hljs-built_in">float</span> centerX = getWidth() / 2f;
    <span class="hljs-built_in">float</span> centerY = getHeight() / 2f;

    mPaint.setStyle(Paint.Style.FILL);
    int count = 0;
    int des = (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, 6, getResources().getDisplayMetrics());
    <span class="hljs-keyword">while</span> (count++ &lt; 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); // 把每段圆弧改成圆角的
    // 计算每次画圆弧时扫过的角度,这里计算要注意分母要转为<span class="hljs-built_in">float</span>类型,否则alphaAngle永远为0
    alphaAngle = currentValue * 360.0f / maxValue * 1.0f;
    canvas.drawArc(oval, -90, alphaAngle, <span class="hljs-literal">false</span>, circlePaint);
}
复制代码
  1. 可以看到绘制圆环的时候, 用到 alphaAngle,这个是扫过的角度,根据 currentValue 当前的进度值,得出当前扫过的角度。maxValue 是 100 最大进度值。更新进度的时候会调用以下这个方法进行更新,在 invalidate()被调用后,View 会进行重绘,回调 onDraw() 方法,得出新的 alphaAngle 角度值,绘制出对应进度的圆环。
public void setProgress(int progress)
    {
        int percent = progress * maxValue / 100;
        if (percent < 0)
        {
            percent = 0;
        }
        if (percent > 100)
        {
            percent = 100;
        }
        this.currentValue = percent;
        //更新View
        invalidate();
    }
复制代码
  1. 绘制文字也是同样的道理,通过 setProgress()方法来更新 currentValue 值。这里绘制文字有个注意的地方:文字的绘制位置居中。drawText() 方法的第二三个参数分别是 Text 文字 x,y 坐标,这里为什么设置为 center 和 baseline 这两个值是有原因的,墙裂推荐这篇博客了解原因:drawText 介绍 这部分的主要代码如下:
private void drawText(Canvas canvas, int center, int radius)
    {
        float result = (currentValue * 100.0f / maxValue * 1.0f); // 计算进度
        String percent = String.format("%.1f", result) + "%";
    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 'https://jitpack.io' }
    }
}
复制代码
  • 在 module 的 build.gradle 中添加:
implementation 'com.github.guoxiaozhou:AnimationDemo:0.5'
复制代码
  • 具体使用 demo 地址:github.com/guoxiaozhou… 项目中包含依赖库源码,有兴趣的可以看看细节,有问题或者错误直接联系我

  • Android

    开放手机联盟(一个由 30 多家科技公司和手机公司组成的团体)已开发出 Android,Android 是第一个完整、开放、免费的手机平台。

    293 引用
感谢    赞同    分享    收藏    关注    反对    举报    ...