iOS仿芝麻信用水滴效果

开篇：

最近接到客户需要开发（就按某付宝那个页面给我做一个）的新需求，大体就是类似芝麻信用的水滴效果（图1）用来展示用户的信用积分。苦于没有思路，找到的iOS实现的文章基本都是类似图2仪表盘的实现思路，故在最后实现效果后记录一下。

 图1：要实现的效果

 图2

1、实现思路

水滴的轨迹其实是一个圆弧，所以需要用到圆弧公式来算出每一个水滴的位置，然后根据水滴所在的位置做对应的偏转。

2、直接上代码

```

//首先算出圆心X，Y的位置

    CGFloatcenterX =KScreenW/2;

    CGFloatcenterY =210;

    //画出一整个圆，隐藏掉不需要的水滴，从第10个点开始，我们需要显示29个点

    intstart =10;

    intshowSpot =29;

    //每个水滴之间的偏转角度

    CGFloatradio = -15;

    for(inti = start ; i < (start + showSpot); i ++) {

        CGFloatradian = (M_PI/180) *7.5*i;

        CGFloatx = centerX +sin(radian) *84;

        CGFloaty = centerY +cos(radian) *84;

        UIImageView*imgView = [[UIImageViewalloc]init];

        imgView.frame=CGRectMake(x, y,7,6);

        UIImage*image = [UIImageimageNamed:@"icon_point_blue"];

        NSIntegerimgInt =29- [pointStrintegerValue];

        for(intj =10; j < (imgInt +10); j ++) {

            if(i == j) {

                 image = [UIImageimageNamed:@"icon_point_white"];

            }

        }

        UIImage*rotatedImg = [imagerotateImageWithDegree:radio];

        imgView.image= rotatedImg;

        [selfaddSubview:imgView];

        radio +=7.5;

    }

```

3、最终效果

图三：最终效果

开发过程中参考了https://blog.csdn.net/qq_25186543/article/details/80349866的思路，虽然是前端的实现方式，但是大体思路相同，而且更加详细，如果我说的不是很清楚，可以去看看这篇