整体效果如下
（一）做出白点旋转效果
大致说一下基础工作和需求：
基础工作：UI做好的表盘一个（可以自己绘制），带白点的条形图一个（我的白点其实是一个长条，除了白点其它是透明的，当然你可以用一个白点围绕着某个点做旋转）
需求：给定一个分数，白点相应旋转一定度数，分数显示的lab值递增，每达到20分星星亮一颗，背景色过渡变换，最后一段要求减速。
把整体分割一下，我们要做的动画有这么几个：
1.白点的旋转
2.分数值的变化
3.背景色的变化
4.减速的体现
5.动画同步
先说1、2、4
材料UI准备过了（表盘标准圆的一部分这点很重要，不然圆心找不对）。
既然几个动画的时间要同步，那么就要找一个基准点，围绕什么来规划，这里我选择了“分数值”（个人觉得除了分数值其他的做不了参考价值）。
这里自定义，每增加一个数值动画时间为X，我定义的为0.05，那么总的动画时间就有了，为0.05 * 分数，白点的旋转时间也就有了依据。这里挺简单的不多说。
说一下这个白点条条的设置，从图上可以看出白点在初始位置并不是水平的，说明我们一开始就要它围绕着圆心偏移一定的角度。
圆心怎么找呢，UI给的图非常标准这点非常感谢，如图显示我的仪表盘
这样半径就是图片的width / 2，圆心就是(width / 2，height - width / 2)，然后把白点条条放到圆心上（需要大致调整一下，因为有条条有高度），还要注意适配，等比例缩放可以解决
设置好之后开始设置围绕圆心旋转，这里需要设置锚点为（1.0，0.5），角度测一下就OK，因为等比例缩放不会改变度数，贴一下这段代码
self.xuanZhuanView = [[UIImageView alloc] initWithFrame:CGRectMake(-JWScaleY(6.5), JWScaleY(128.5 - 7), JWScaleY(135), JWScaleY(14))];
_xuanZhuanView.image = [UIImage imageNamed:@"旋转白点"];
[self addSubview:_xuanZhuanView];
_xuanZhuanView.layer.anchorPoint = CGPointMake(1, 0.5);
self.xuanZhuanView.frame = CGRectMake(-JWScaleY(6.5), JWScaleY(128.5 - 7), JWScaleY(135), JWScaleY(14));
CGAffineTransform transform = CGAffineTransformMakeRotation(-20 * M_PI/180.0);
[_xuanZhuanView setTransform:transform];
这样初始状态就是这样的：
白点的旋转我选择了CALayer的基础动画，操作起来清晰简便，最重要的是它有个设置动画速度的属性，轻松达到减速效果。这里需要计算一下需要旋转多少度和一个临界值（这里是 9 分，9分以下是负值，以上是正值），设置旋转之后位置不恢复到起始点等属性。代码大致如下：
#pragma mark 圆点动画
- (void)yuanDianAnimation {
[_instrumentView.xuanZhuanView.layer removeAllAnimations];
CABasicAnimation *roteAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
CGFloat rote = 0;
if (grades < 9) {
rote = -(20 - grades / 100.0);
} else {
rote = grades / 100.0 * 220 - 20;
}
roteAnimation.fromValue = [NSNumber numberWithFloat:-20 * M_PI/180.0];
roteAnimation.toValue = [NSNumber numberWithFloat:rote * M_PI/180.0];
//位置不恢复
roteAnimation.fillMode = kCAFillModeForwards;
roteAnimation.removedOnCompletion = NO;
roteAnimation.duration = animationTime;
//减速效果
roteAnimation.timingFunction =
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
[_instrumentView.xuanZhuanView.layer addAnimation:roteAnimation forKey:@"rotationAnimation"];
[_fastTimer setFireDate:[NSDate distantPast]];
}
到目前位置，白点的动画全部完毕，分数递增的动画匀速的话很简单，现在要做成渐变的，最后一段要明显减速，这里需要再做些处理。
这里我用了两个计时器fastTimer和slowTimer，大致思路如下（如果有更好的方法欢迎提出）：
fastTimer负责百分之90的分数值递增，比如80分的话这个计时器方法负责0-72之间快速的方法处理，这个过程速度加快为0.05 * 0.9。然后计算剩下的时间和分数，得出多少秒需要执行一次慢速的方法处理。
这里注意，如果你的视图有滑动视图的话，因为RunLoop的原因需要手动将计时器加到CommonModes里，不然因为mode的切换影响计时器。
代码大致如下：
#pragma mark 设置定时器等事件
- (void)setUpThings {
animationTime = grades * kTimerInterval;
self.fastTimer = [NSTimer timerWithTimeInterval:kTimerInterval * kFastProportion target:self selector:@selector(fastTimerAction) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_fastTimer forMode:NSRunLoopCommonModes];
self.slowTimer = [NSTimer timerWithTimeInterval:(animationTime - kTimerInterval * kFastProportion * grades * kFastProportion) / (grades * (1 - kFastProportion)) target:self selector:@selector(slowTimerAction) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_slowTimer forMode:NSRunLoopCommonModes];
[_fastTimer setFireDate:[NSDate distantFuture]];
[_slowTimer setFireDate:[NSDate distantFuture]];
}
#pragma mark 加速定时器触发事件
- (void)fastTimerAction {
if (labTextNumber == grades) {
[self.fastTimer invalidate];
return;
}
if (labTextNumber > grades * kFastProportion) {
[self.fastTimer invalidate];
[self.slowTimer setFireDate:[NSDate distantPast]];
return;
}
[self actionTimerConmmon];
}
#pragma mark 减速定时器触发事件
- (void)slowTimerAction {
if (labTextNumber == grades) {
[self.slowTimer invalidate];
if (labTextNumber == 100) {
_instrumentView.starView.starArray[4].image = [UIImage imageNamed:@"实心星星"];
}
return;
}
[self actionTimerConmmon];
}
#pragma mark 计时器共性事件 - lab赋值 背景颜色变化
- (void)actionTimerConmmon {
if (labTextNumber % 20 == 0 && labTextNumber != 0) {
NSInteger index = labTextNumber / 20;
_instrumentView.starView.starArray[index - 1].image = [UIImage imageNamed:@"实心星星"];
}
if (labTextNumber % 7 == 0 && labTextNumber != 0) {
NSInteger colorIndex = labTextNumber / 7;
dispatch_async(dispatch_get_main_queue(), ^{
[self setUpBackGroundColorWithColorArrayIndex:colorIndex];
});
}
labTextNumber++;
_instrumentView.gradeLab.text = [NSString stringWithFormat:@"%ld",labTextNumber];
}
到这里，白点和lab的动画就已经完成了，星星的动画很简单不多说了。
这里有个问题，lab的数值变化的时候抖动感很强烈，在芝麻信用里感觉不到，知道这个小bug解决方式的同学求指导。
个人原创，引用或转载请注明出处。
