android 高仿ios水滴,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、最终效果

图三：最终效果