ios - 基于 UIBezierPath 改变 UIImageView 的位置

Question

我正在使用 UIBezierPath 开发一个循环进度条。进度条根据随机生成的 float 更改其颜色和位置。

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

- (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 但我得到的只是在屏幕上随机位置绘制的图像。

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

如有任何帮助，我们将不胜感激。

非常感谢!

花岗岩

Answer 1

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

最简单的:由于您的贝塞尔曲线是半圆，因此使用三角函数计算沿圆的位置。

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

一旦你解决了这个问题，你的代码就会为 0 到 180 度的圆弧设置动画。 (实际上，你是在倒退，从 180 度到 0 度，iOS 中的三角是基于弧度的，范围从 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。您需要创建一条路径来反射(reflect)彩色弧线的路径，但定义按钮的位置。 (在您的情况下，只是一个半径较大的圆弧。)

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

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