iOS: a Complete 360 Degree-Rotation Using Block, Not CABasicAnimation

Unheilig picture Unheilig · Oct 16, 2013 · Viewed 13.8k times · Source

It should be something really simple, but I have not been successful in getting this to work using blocks. There are questions and answers to this, but all of them I found are solved by the use of CABasicAnimation and not by UIView Block-Based Animation, which is what I am after.

The following code doesn't work (Block-Based), no animation:

CGAffineTransform spin = CGAffineTransformRotate(spiningView.transform, DEGREES_RADIANS(360));

CATransform3D identity = CATransform3DIdentity;
CATransform3D spin2 =  CATransform3DRotate(identity, DEGREES_RADIANS(360), 0.0f, 0.0f, 1.0f);


[UIView animateWithDuration:3.0f
                      delay:0.0f
                    options:UIViewAnimationOptionCurveLinear
                 animations:^
                 {
                     spiningView.transform = spin;
                     //spiningView.layer.transform = spin2;
                     //Have also tried the above, doesn't work either.
                 }
                 completion:^(BOOL finished)
                 {
                     spiningView.transform = spin;
                     //spiningView.layer.transform = spin2;
                 }];

From my understanding, when every time we use Block-Based, no animation would occur, when UIViewAnimation Block "sees" that the begin value is the same as the final value. Fair enough, setting it to move to 360 degree would mean that the object stays where it is. But it has to be a way to use Block-Based Animation to make this animate, because the following CABasicAnimation would work flawlessly:

CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0f];
rotationAnimation.duration = 3.0f;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1;
[spiningView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];  

In Addition, the following Block-Based works, but there is a stop in between animations (first it rotates to 180 degrees, then therefrom to make another 180 degrees to complete the rotation), which is not what I am after:

[UIView animateWithDuration:3.0f
                      delay:0.0f
                    options:UIViewAnimationOptionCurveLinear
                 animations:^
                 {
                     spiningView.transform = CGAffineTransformRotate(spiningView.transform, DEGREES_RADIANS(180));;
                 }
                 completion:^(BOOL finished)
                 {                         
                     [UIView animateWithDuration:3.0f
                                           delay:0.0f
                                         options:UIViewAnimationOptionCurveLinear
                                      animations:^
                                      {
                                         spiningView.transform = CGAffineTransformRotate(spiningView.transform, DEGREES_RADIANS(360));
                                      }
                                      completion:^(BOOL finished)
                                      {

                                      }];

                 }];

I know I could save a lot of time and just surrender myself to using CABasicAnimation and be done with it, but I would like to know why one works and the other doesn't in this case (making a 360 degree rotation). I hope that you can give me a detailed explanation regarding this between the 2 in this case and some code (Block-Based) that can carry out a complete 360 degree rotation.

Thanks in advance.

Answer

neilco picture neilco · Oct 16, 2013

With UIView animations, Core Animation computes the shortest path between the initial transform and the final transform. The 360° rotation doesn't work because the final transform is the same as the initial transform.

For what it's worth, I've just tried the following code which makes four 90° rotations smoothly with no delay between rotations:

- (void)rotateSpinningView
{
    [UIView animateWithDuration:1.5 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        [spiningView setTransform:CGAffineTransformRotate(spiningView.transform, M_PI_2)];
    } completion:^(BOOL finished) {
        if (finished && !CGAffineTransformEqualToTransform(spiningView.transform, CGAffineTransformIdentity)) {
            [self rotateSpinningView];
        }
    }];
}