圆环百分比分布图

最新推荐文章于 2024-08-27 22:58:45 发布

姜小辉

最新推荐文章于 2024-08-27 22:58:45 发布

阅读量3.3k

点赞数

分类专栏： android 文章标签：百分比占比动画圆弧

本文链接：https://blog.csdn.net/asdfasfasfs/article/details/78532517

版权

本文介绍了如何制作百分比分布图，详细讲解了从绘制灰色底圆到动态实现绿色和红褐色圆弧的过程。通过动画调整圆弧角度，实现了圆环的动态变化。文章提供了完整的实现代码。

摘要由CSDN通过智能技术生成

有时候我们会遇到做百分比分布图的功能，这样的功能说难不难，说容易也不容易，主要是对绘制api和动画掌握的较为熟悉就行，下面就试试做下这个功能

首先看个效果图: 这里写图片描述

一、分析

实现这个效果要做哪些事：

1.画一个底部灰色圆
2.画绿色圆弧
3.画红褐色圆弧

动态圆弧的实现可以通过动画来实现，首先是绿色圆弧，只需要动态增加圆弧所需要经过的弧度即可，红褐色圆弧则就需要将起点设置在绿圆弧的结束位置，结束点在绿圆弧的起点角度

二、实现

按照上面的思路来做，第一步先画一个圆底，只需要一句话即可：

canvas.drawCircle(getWidth()/2,getHeight()/2,getWidth()/2-paintSize, cyclePaint);

然后做第二步画绿色圆弧，代码如下：

canvas.drawArc(rectF, 180, sweepAngle, false, paintFirst);

sweepAngle是需要动态改变的，通过动画实现：

  public void startAnimation(){
        ValueAnimator animator=ValueAnimator.ofFloat(0,progress);
        animator.setDuration(1500);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float progress= (float) animation.getAnimatedValue();
                sweepAngle=progress*360/100;