Change position of UIImageView based on UIBezierPath - ios

Question

I am developing a circular progress bar using UIBezierPath. The progress bar changes its color and position based on a randomly generated float number.
So far the progress bar works fine. I used the following code in order to draw and animate the color:
- (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 ];
}
}
Now I want to change the position of the small button on the right side of the progress bar (see first image with the red arrow) based on the current position of the progress bar. I tried to change its frame and setting the x and y position of the image to randomValue but all i got was the image drawn at a random place on the screen.
Does anyone have an idea how to tackle this?
Any help would be greatly appreciated.
Thank you very much!
Granit

Answer 1

There are various ways to tackle this.
The simplest: Since your Bezier curve is a half-circle, use trig to calculate the position along your circle.
I noticed that you are animating your colored bar using strokeEnd values from 0 to 10. The valid values of strokeEnd range from 0.0 to 1.0. You should change that to animate from 0.0 to 1.0.
Once you've fixed that, you code is animating an arc from 0 to 180 degrees. (Actually, you're going backwards, from 180 degrees to 0 degrees, and trig in iOS is based on Radians, which range from 0 to 2π.
If you have an input number value, which ranges from 0 to 1, a CGPoint center that is the center of your arc, and a value r which is distance from the center of your button to the center of the circle (radius of the circle your button will travel along) then your point position would be:
angle = 2* M_PI * (1-value);
buttonCenter.x = center.x + r * cos(angle);
buttonCenter.y = center.y + r * sin(angle);
Another option that would let you animate it would be to create a transform that rotates the button around your center point. You could even use UIView animation to do this. (To build your transform: start with identity transform. Translate center point, rotate, translate back.)
The other options all involve using a bezier path or CGPath. You would need to create a path that mirrors the path of your colored arc but defines the placement of your button. (In your case just an arc with a larger radius.)
If you had a bezier path that was a simple cubic bezier curve, you could use the Bezier formula to calculate the x & y value of your point that way. If you were using a bezier path that consisted of multiple segments then you would need a way to get a point along an arbitrary CGPath. I don't know how to do this specifically, but it should be possible, since the system can animate layers along an arbitrary CGPath using keyframe animation.
The next option would be to use keyframe animation and animate your button along a GCPath. You should be able to animate it to an arbitrary point along it's path by manipulating the time settings of the animation. This is a little tricky and not very well documented.