Move custom UIView with CAKeyframeAnimation and CGMutablePathRef

Question

I have a uiview object with its own class and .xib file (= GroupOnScreen).

The UIView holds two UIImageViews and a UIButton.

In my ViewController serveral of these UIViews are created and drawn on screen:

- (void)viewDidLoad
{
    ...
    GroupOnScreen *group = [[GroupOnScreen alloc] initWithFrame:CGRectMake(462, 126, 100, 100)];
    ...
    group.delegate = self;
    [self.view insertSubview:group belowSubview:_BlackView];
    [groupDictionary setObject:group forKey:someKey];
    ...
}

After that, they are positioned in a circle around another UIImageView with an animation:

- (void)moveGroupsAroundTheImage
{
     int numberOfGroups = (int)[[groupDictionary allKeys] count];

     int centerX = self.view.bounds.size.width/2;
     int centerY = self.view.bounds.size.height/2;

     float startAngle = degreesToRadians(startAngleDegree);
     float stopAngle = 0;

     for (id key in groupDictionary) {

         GroupOnScreen *currentGroup = [groupDictionary objectForKey:key];

         int keyValue = [key intValue];

         stopAngle = -90 + (30 * keyValue + (-15 * numberOfGroups + 15));
         stopAngle = degreesToRadians(stopAngle);

         CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

         pathAnimation.calculationMode = kCAAnimationPaced;
         pathAnimation.fillMode = kCAFillModeForwards;
         pathAnimation.removedOnCompletion = NO;
         pathAnimation.duration = 0.4;
         pathAnimation.repeatCount = 0;

         CGMutablePathRef path = CGPathCreateMutable();

         if (keyValue + 1 > (numberOfGroups / 2)) {
             CGPathAddArc(path, NULL, centerX, centerY, 205, startAngle, stopAngle, NO);
         } else {
             CGPathAddArc(path, NULL, centerX, centerY, 205, startAngle, stopAngle, YES);
         }

         pathAnimation.path = path;
         CGPathRelease(path);

         [currentGroup.layer addAnimation:pathAnimation forKey:@"moveTheObject"];
      }
 }

This works perfectly. All Groups with its Buttons and Images are moved in circle but i cannot click on any of those buttons. The clickable part of the buttons somehow stay on the point where they where instanciated. That means: I can see the button moving around as the animation goes, but i can only click at that point they were created... that is an empty spot somewhere on the screen.

Why is the "space where you click on a button" not moving?

Can somebody help me?

Search the web for "presentation layer" (or read about the difference between model values and presentation values in the Core Animation Programming Guide). — David Rönnqvist, Nov 05 '14 at 14:13
Thank you. I have to set the frame of the UIView after the animation stops. I added an answer below. — Christoph, Nov 05 '14 at 14:54
Also, avoid `removedOnCompetion=NO` if you can for just this reason. Instead update the property to the new value when you add the animation. — David Rönnqvist, Nov 05 '14 at 16:33

score 0 · Accepted Answer · answered Nov 05 '14 at 14:53

I made it by adding:

- (void)moveGroupsAroundTheImage
{
    ...
    pathAnimation.delegate = self;
    ...
}

and this:

- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)finished
{
    for (id key in groupDictionary) {
        GroupOnScreen *currentGroup = [groupDictionary objectForKey:key];
        currentGroup.frame = [[currentGroup.layer presentationLayer] frame];
    }
}

Move custom UIView with CAKeyframeAnimation and CGMutablePathRef

1 Answers1