iOS绘制仪表盘，游标沿圆形轨迹移动动画

最新推荐文章于 2025-09-14 11:52:59 发布

原创

最新推荐文章于 2025-09-14 11:52:59 发布 · 902 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #经验分享 #ios

本文介绍了如何在iOS中创建一个仪表盘界面，包括计算角度绘制圆弧、利用StrokeEnd属性动态改变圆弧长度以及制作游标沿圆形轨迹移动的动画效果。通过设置CAShapeLayer和UIBezierPath，结合CABasicAnimation实现平滑的动画过渡，并提供了关键代码示例。同时，文章强调了在不同clockwise方向下角度转换的重要性。

最近碰到一个需求，需要画一个仪表盘的页面。图上所示。

计算角度

圆弧部分还好，用CAShapeLayer+UIBezierPath曲线，只要确定好圆心部分和左右两边的角度就行。这里正好说明一下

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise API_AVAILABLE(ios(4.0));

这个接口startAngle、endAngle和clockwise的关系，之前一直记不太清。

我们需要看一下下面这张图
在这里插入图片描述
clockwise为true的时候，就会从startAngle按顺时针方向画弧。为false的时候，按逆时针方向画弧。
这里有一个要注意的地方是

顺时针的360°表示的值，必须是0~2*M_PI，
逆时针的360°表示的值必须是0~-2*M_PI。
同一个角度表示的值，在clockwise取true或者false的情况下，是需要转换的。

了解了上面的注意点之后，三条圆弧还是能很方便的画出来的。
接下来就是动态的显示进度。即白色圆弧每次数值变化，弧线动态增长或减少。

StrokeEnd

一开始想的是每次都重新绘制贝塞尔曲线，但是发现从动画效果上来看，每次重新绘制，都会从起点位置绘制到终点位置。不是想要的效果。
然后又想着设置layer.masksToBounds=true然后，画一条半圆，通过旋转来达到左右移动的效果，这样超出layer的部分就不会显示了，但是又发现背景的圆弧不是一块半圆，会存在覆盖不全的情况。
后来查看CAShaperLayer的说明，发现这样一个属性

/* These values define the subregion of the path used to draw the
 * stroked outline. The values must be in the range [0,1] with zero
 * representing the start of the path and one the end. Values in
 * between zero and one are interpolated linearly along the path
 * length. strokeStart defaults to zero and strokeEnd to one. Both are
 * animatable. */

@property CGFloat strokeStart;
@property CGFloat strokeEnd;

这两个值默认是0和1，对应的就是起始点和终点的比例，当storkeEnd=0.5的时候，原来圆弧终点的值就会减少为原来的一半
那么我就可以这样了，我先画一套完整的覆盖背景圆弧的实线圆弧，设置strokeEnd=0，这样圆弧长度就为0了。当值变化的时候，在调整strokeEnd的值。就可以动态的变化圆弧长度了。
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 1;
animation.fromValue = @(oldValue/100.0);
animation.toValue = @(value/100.0);
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.valueLayer addAnimation:animation forKey:@"valueProgress"];

绘制移动路径

搞定了圆弧的变化之后，还有一部分是小圆点的移动，它是按照圆弧的轨迹移动的，那么在做动画效果的时候，就要让小圆点按照圆弧的轨迹移动位置。

UIBezierPath *bezierPath = [UIBezierPath bezierPath];
CGFloat outerWidth = 226;
if (oldValue > value) { // <-
    CGFloat valueAngle = value/100.0 * (2*M_PI - (self.startAngle - self.endAngle)) + self.startAngle;
    CGFloat oldAngle = oldValue/100.0 * (2*M_PI - (self.startAngle - self.endAngle)) + self.startAngle;
    
    valueAngle = valueAngle - 2*M_PI;
    oldAngle = oldAngle - 2*M_PI;
    
    [bezierPath addArcWithCenter:CGPointMake(outerWidth/2, outerWidth/2) radius:outerWidth/2 startAngle:oldAngle e