根据 UIBezierPath 改变 UIImageView 的位置

Posted 2023-03-13

【中文标题】根据 UIBezierPath 改变 UIImageView 的位置

【英文标题】：Change position of UIImageView based on UIBezierPath

【发布时间】：2013-12-23 13:20:51

【问题描述】：

我正在使用 UIBezierPath 开发一个圆形进度条。进度条根据随机生成的浮点数改变颜色和位置。

到目前为止，进度条工作正常。我使用以下代码来绘制颜色并为其设置动画：

- (void)viewDidLoad

    [super viewDidLoad];
     self.view.backgroundColor =  [UIColor colorWithRed:244.0/255.0 green:244.0/255.0 blue:244.0/255.0 alpha:1.0];

    loader = [[UIImageView alloc]initWithFrame:CGRectMake(39, 110, 240, 130)];
    loader.image = [UIImage imageNamed:@"loader.png"];
    [self.view bringSubviewToFront:loader];
    [self.view addSubview:loader];

    // Draw the arc with bezier path
    int radius = 100;

    arc = [CAShapeLayer layer];
    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:radius startAngle:M_PI endAngle:M_PI/150 clockwise:YES].CGPath;
    arc.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius,
                                CGRectGetMidY(self.view.frame)-radius);
    arc.fillColor = [UIColor clearColor].CGColor;
    arc.strokeColor = [UIColor purpleColor].CGColor;
    arc.lineCap = kCALineCapRound;
    arc.lineWidth = 6;

    [self.view.layer addSublayer:arc];

    // Animation of the progress bar
    drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 5.0; // "animate over 10 seconds or so.."
    drawAnimation.repeatCount         = 1.0;  // Animate only once..
    drawAnimation.removedOnCompletion = YES;   // Remain stroked after the animation..
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:10.0f];
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

    // Gradient of progress bar
    gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.view.frame;
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor purpleColor].CGColor ];
    gradientLayer.startPoint = CGPointMake(0,0.1);
    gradientLayer.endPoint = CGPointMake(0.5,0.2);
    [self.view.layer addSublayer:gradientLayer];
    gradientLayer.mask = arc;

    refreshButton = [[UIButton alloc] initWithFrame:CGRectMake(50, 370, 50, 50)];
    [refreshButton addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventTouchUpInside];
    [refreshButton setBackgroundImage:[UIImage imageNamed:@"refresh.png"] forState:UIControlStateNormal];
    [self.view addSubview:refreshButton];

    smallButton = [[UIImageView alloc] initWithFrame:CGRectMake(285, 225, 15, 15)];
    smallButton.image = [UIImage imageNamed:@"buttonSmall.png"];
    [self.view addSubview:smallButton];




-(void)refresh:(id)sender
    NSLog(@"Refresh action:");
    CGFloat randomValue = ( arc4random() % 256 / 256.0 );
    NSLog(@"%f", randomValue);

    valueLabel.text = @"";
    valueLabel = [[UILabel alloc] initWithFrame:CGRectMake(150, 370, 100, 50)];
    valueLabel.text = [NSString stringWithFormat: @"%.6f", randomValue];
    [self.view addSubview:valueLabel];


    // Animation of the progress bar
    drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 5.0; // "animate over 10 seconds or so.."
    drawAnimation.repeatCount         = 1.0;  // Animate only once..
    //drawAnimation.removedOnCompletion = YES;   // Remain stroked after the animation..
    //drawAnimation.fillMode  = kCAFillModeRemoved;
    drawAnimation.fillMode = kCAFillModeForwards;
    drawAnimation.removedOnCompletion = NO;
    drawAnimation.fromValue = [NSNumber numberWithFloat:randomValue];
    drawAnimation.toValue   = [NSNumber numberWithFloat:randomValue];
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"];


    if (randomValue >= 0.500000) 
        gradientLayer.colors = @[(__bridge id)[UIColor purpleColor].CGColor,(__bridge id)[UIColor purpleColor].CGColor,(__bridge id)[UIColor purpleColor].CGColor ];
     else if (randomValue <= 0.089844)
        gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor redColor].CGColor ];
    
    else
        gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor purpleColor].CGColor ];
    

现在我想根据进度条的当前位置更改进度条右侧小按钮的位置（见第一张带有红色箭头的图像）。我试图改变它的框架并将图像的 x 和 y 位置设置为randomValue，但我得到的只是在屏幕上随机位置绘制的图像。

有人知道如何解决这个问题吗？

任何帮助将不胜感激。

非常感谢！

花岗岩

【参考方案1】：

有多种方法可以解决这个问题。

最简单的：因为你的贝塞尔曲线是一个半圆，使用三角函数来计算你的圆的位置。

我注意到您正在使用从 0 到 10 的 strokeEnd 值设置彩色条的动画。strokeEnd 的有效值范围从 0.0 到 1.0。您应该将其更改为从 0.0 到 1.0 的动画。

一旦您解决了这个问题，您的代码就会为 0 到 180 度的弧设置动画。 （其实你是往回走，从180度到0度，ios中的trig是基于弧度的，范围从0到2π。

如果您有一个输入数值，范围从 0 到 1，一个 CGPoint 中心是您的弧的中心，一个值 r 是从按钮中心到圆心的距离（半径您的按钮将沿着圆圈移动）然后您的点位置将是：

angle = 2* M_PI * (1-value);
buttonCenter.x = center.x + r * cos(angle);
buttonCenter.y = center.y + r * sin(angle);

另一个可以让您对其进行动画处理的选项是创建一个围绕您的中心点旋转按钮的变换。你甚至可以使用 UIView 动画来做到这一点。 （构建你的变换：从恒等变换开始。平移中心点，旋转，向后平移。）

其他选项都涉及使用贝塞尔路径或 CGPath。您需要创建一个路径来反映您的彩色弧的路径，但定义按钮的位置。 （在您的情况下，只是半径较大的弧。）

如果您有一条简单的三次贝塞尔曲线的贝塞尔路径，则可以使用贝塞尔公式来计算您的点的 x 和 y 值。如果您使用的是由多个段组成的贝塞尔路径，那么您将需要一种沿任意 CGPath 获取点的方法。我不知道具体如何执行此操作，但应该可以，因为系统可以使用关键帧动画沿任意 CGPath 对图层进行动画处理。

下一个选项是使用关键帧动画并沿 GCPath 为您的按钮设置动画。您应该能够通过操纵动画的时间设置将其设置为沿其路径的任意点。这有点棘手，并且没有很好的记录。

【讨论】：

非常感谢您的详尽回答和解释！我尝试了你的第一个建议，但似乎我没有声明弧的中心是正确的。目前中心声明如下：center = CGPointMake(self.view.frame.size.width / 2, 225);并且按钮移动到错误的位置i.imgur.com/mBUxwH5.png@Duncan

根据您发布的代码，在我看来您的彩色弧线以 (100, 50) 为中心，并使用定义为“半径”的半径值。