以非常高的速率绘制动态形状 iOS

Question

我正在尝试创建一种看起来像这样的“雷达”：

这个想法是蓝色部分将像指南针一样指示用户与物品的接近程度。当用户远离目标时，形状会变窄、变长和蓝色，当用户靠近时，形状会变短、变粗和变红，如下图：

为了实现这一点，我画了几个圈子（实际上我尝试了 IBDesignable 和 IBInspectable 但我一直收到“构建失败”但这是另一个主题）

我的问题是：这是否可以绘制“锥形”部分，该部分应该以高速率改变其尺寸而不会有滞后的风险？ 我可以使用 UIBezierPath / AddArc 或 Addline 方法来实现这一点，还是我正走向死胡同？

Answer 1

有两种方法：

1. 定义复杂的贝塞尔曲线形状和动画使用CABasicAnimation：

   - (UIBezierPath *)pathWithCenter:(CGPoint)center angle:(CGFloat)angle radius:(CGFloat)radius {
       UIBezierPath *path = [UIBezierPath bezierPath];
   
       CGPoint point1 = CGPointMake(center.x - radius * sinf(angle), center.y - radius * cosf(angle));
   
       [path moveToPoint:center];
       [path addLineToPoint:point1];
   
       NSInteger curves = 8;
       CGFloat currentAngle = M_PI_2 * 3.0 - angle;
   
       for (NSInteger i = 0; i < curves; i++) {
           CGFloat nextAngle = currentAngle + angle * 2.0 / curves;
           CGPoint point2 = CGPointMake(center.x + radius * cosf(nextAngle), center.y + radius * sinf(nextAngle));
           CGFloat controlPointRadius = radius / cosf(angle / curves);
           CGPoint controlPoint = CGPointMake(center.x + controlPointRadius * cosf(currentAngle + angle / curves), center.y + controlPointRadius * sinf(currentAngle + angle / curves));
           [path addQuadCurveToPoint:point2 controlPoint:controlPoint];
           currentAngle = nextAngle;
           point1 = point2;
       }
       [path closePath];
       return path;
   }
   

   我只是将圆弧分割成一系列四边形曲线。我发现三次曲线可以更接近，但只需几条四边形曲线，我们就可以得到非常好的近似值。

   然后使用 CABasicAnimation 对其进行动画处理：

   - (void)viewDidAppear:(BOOL)animated {
       [super viewDidAppear:animated];
   
       CAShapeLayer *layer = [CAShapeLayer layer];
       layer.fillColor = self.startColor.CGColor;
       layer.path = self.startPath.CGPath;
       [self.view.layer addSublayer:layer];
       self.radarLayer = layer;
   }
   
   - (IBAction)didTapButton:(id)sender {
       self.radarLayer.path = self.finalPath.CGPath;
       CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
       pathAnimation.fromValue = (id)self.startPath.CGPath;
       pathAnimation.toValue = (id)self.finalPath.CGPath;
       pathAnimation.removedOnCompletion = false;
   
       self.radarLayer.fillColor = self.finalColor.CGColor;
       CABasicAnimation *fillAnimation = [CABasicAnimation animationWithKeyPath:@"fillColor"];
       fillAnimation.fromValue = (id)self.startColor.CGColor;
       fillAnimation.toValue = (id)self.finalColor.CGColor;
       fillAnimation.removedOnCompletion = false;
   
       CAAnimationGroup *group = [CAAnimationGroup animation];
       group.animations = @[pathAnimation, fillAnimation];
       group.duration = 2.0;
       [self.radarLayer addAnimation:group forKey:@"bothOfMyAnimations"];
   }
   

   这会产生：

2. 另一种方法是使用简单的贝塞尔曲线，但带有显示链接的动画：

   如果您想使用 CAShapeLayer 和 CADisplayLink（类似于针对屏幕更新优化的计时器），您可以执行以下操作：

   @interface ViewController ()
   
   @property (nonatomic, strong) CADisplayLink *displayLink;
   @property (nonatomic) CFAbsoluteTime startTime;
   @property (nonatomic) CFAbsoluteTime duration;
   @property (nonatomic, weak) CAShapeLayer *radarLayer;
   
   @end
   
   @implementation ViewController
   
   - (void)viewDidAppear:(BOOL)animated {
       [super viewDidAppear:animated];
   
       CAShapeLayer *layer = [CAShapeLayer layer];
       [self.view.layer addSublayer:layer];
       self.radarLayer = layer;
       [self updateRadarLayer:layer percent:0.0];
   }
   
   - (IBAction)didTapButton:(id)sender {
       [self startDisplayLink];
   }
   
   - (void)updateRadarLayer:(CAShapeLayer *)radarLayer percent:(CGFloat)percent {
       CGFloat angle = M_PI_4 * (1.0 - percent / 2.0);
       CGFloat distance = 200 * (0.5 + percent / 2.0);
   
       UIBezierPath *path = [UIBezierPath bezierPath];
       [path moveToPoint:self.view.center];
       [path addArcWithCenter:self.view.center radius:distance startAngle:M_PI_2 * 3.0 - angle endAngle:M_PI_2 * 3.0 + angle clockwise:true];
       [path closePath];
   
       radarLayer.path = path.CGPath;
       radarLayer.fillColor = [self colorForPercent:percent].CGColor;
   }
   
   - (UIColor *)colorForPercent:(CGFloat)percent {
       return [UIColor colorWithRed:percent green:0 blue:1.0 - percent alpha:1];
   }
   
   - (void)startDisplayLink {
       self.startTime = CFAbsoluteTimeGetCurrent();
       self.duration = 2.0;
       self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleDisplayLink:)];
       [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
   }
   
   - (void)handleDisplayLink:(CADisplayLink *)link {
       CGFloat percent = (CFAbsoluteTimeGetCurrent() - self.startTime) / self.duration;
       if (percent < 1.0) {
           [self updateRadarLayer:self.radarLayer percent:percent];
       } else {
           [self stopDisplayLink];
           [self updateRadarLayer:self.radarLayer percent:1.0];
       }
   }
   
   - (void)stopDisplayLink {
       [self.displayLink invalidate];
       self.displayLink = nil;
   }
   

   这会产生：

Answer 2

您可能应该使用一个或多个 CAShapeLayer 对象和核心动画。

您可以将UIBezierPath 中的CGPath 安装到形状层中，并且可以为形状层的更改设置动画，但要使动画正常工作，您需要具有相同数量和类型的控件动画开始和结束时形状中的点。