iOS: jerkiness when animation stops and keeping animation in sync with modal

Question

I am trying to perform a transform for the views on y axis using CABasicAnimation:

for(int x = 0; x < viewsArray.count; x++)
{
    CABasicAnimation *startAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    [startAnimation setToValue:[NSNumber numberWithFloat:DEGREES_RADIANS(-55.0f)]];
    [startAnimation setDuration:5.0];
    startAnimation.delegate = self;
    UIView *view = [viewsArray objectAtIndex:x];
    [startAnimation setValue:@"rotate" forKey:@"id"];
    [view.layer addAnimation:startAnimation forKey:@"rotate"];
}

Nothing fancy. I would like just to keep the modal and the animation in sync, so in animationDidStop I try to set the transform again using a for-loop:

if([[anim valueForKey:@"id"] isEqualToString:@"rotate"])
{
    aTransform = CATransform3DRotate(aTransform, DEGREES_RADIANS(-55.0), 0.0, 1.0, 0.0);
    for(int x = 0; x < viewsArray.count; x++)
    {
        UIView *view = [viewsArray objectAtIndex:x];
        view.layer.transform = aTransform;
    }
}

But I realized after the animation stops the animation would jerk to the angle set by the transform in animationDidStop.

Does any one know why and what would be the best way to do this without having to use removedOnCompletion = NO;? I would like to avoid using that and would like to keep the animation always in sync with the modal layer.

Answer 1

You can set it at the same time as you add your animation, but you'll need to supply a fromValue to the animation to stop it updating the presentation layer immediately:

for(int x = 0; x < viewsArray.count; x++)
{
    UIView *view = [viewsArray objectAtIndex:x];
    NSString *keyPath = @"transform.rotation.y";
    NSNumber *toValue = [NSNumber numberWithFloat:DEGREES_RADIANS(-55.0f)];

    CABasicAnimation *startAnimation = [CABasicAnimation animationWithKeyPath:keyPath];
    [startAnimation setFromValue:[view.layer valueForKeyPath:keyPath]];
    //[startAnimation setToValue:toValue]; We don't need to set this as we're updating the current value on the layer instead.
    [startAnimation setDuration:5.0];
    [view.layer addAnimation:startAnimation forKey:@"rotate"];
    [view.layer setValue:toValue forKeyPath:keyPath]; // Update the modal
}