Rotating UIButtons on a view.

Question

I have 5 buttons on a UIView that I would like to plot evenly along a circular path, and have them rotate continuously along that path. To be clear, I don't want to rotate the buttons themselves, I just want them to move along the circular path.

What is the best way to manage this?

Answer 1

Create a UIBezierPath or CGPath for each button, adjusting the starting angle and ending angle to account for the initial starting points of each. Then for each button/path create a CAKeyframeAnimation, give it the path, set it to autorepeat and add it to the appropriate button's layer.

The UIBezierPath method +bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise: will help you create the circular paths. You'll need to calculate the correct angles, but that's just a small bit of math.

Answer 2

There's no reason to animate each button individually along a path. You said that you have 5 buttons on a UIView. Just rotate this view you've added them to and all other buttons will rotate providing the same effect as what you're asking for with a path.

The trick is you will need an explicit animation rather than the UIView animation shortcuts:

CABasicAnimation* rotationAnimation = 
          [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
[rotationAnimation setToValue:[NSNumber numberWithFloat:DegreesToRadians(360)]];
// Make a full rotation in five seconds
[rotationAnimation setDuration:5.0];
// Repeat forever.
[rotationAnimation setRepeatCount:HUGE_VALF];
// Make the animation timing linear
[rotationAnimation setTimingFunction:
                      [CAMediaTimingFunction 
                       functionWithName:kCAMediaTimingFunctionLinear]];

[[rotationView layer] addAnimation:rotationAnimation forKey:nil];

The variable rotationView is the view that contains all of the buttons. At this point all you really need to do is calculate where your buttons should be positioned initially. Everything else is handled for you.