Rotate a UIView on its X-axis(Horizontal axis)

Question

I wanted to rotate a UIView on its horizontal axis for 360 degrees and then refresh the content in the view. I was looking out for solutions on this. Found a couple here n there. This is what I came out with.

    [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionTransitionNone animations:^{
        self.tableView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0);
    } completion:^(BOOL finished){
        NSLog(@"Finished first pi");
        [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionTransitionNone animations:^{
            self.tableView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0);
        }  completion:^(BOOL finished) {
            NSLog(@"Finished second pi");

        }];           

    }];

This flips the view but only by 180 degrees. I want it to flip one more time so that I can see the view normally..

Both my NSLogs are displayed one after the other. I am sure I am missing something here. ANy help would be helpful..

Thanks

score 9 · Accepted Answer · answered Oct 07 '11 at 20:46

9

In your completion block try concatenating the new transform with the current transform.

self.tableView.layer.transform = CATransform3DConcat(self.tableView.layer.transform, CATransform3DMakeRotation(M_PI,1.0,0.0,0.0));

answered Oct 07 '11 at 20:46

jaminguy

25,840
2
23
21

1

You don't need to set the `transform` on the `CALayer` directly in this case, you can simply set the `transform` on the `UIView`, although it is a different `struct` type - a `CGAffineTransform`. – Jacob Relkin Oct 07 '11 at 20:58
That's correct. I just wanted to go off of the example given. I always use the transform on UIView. – jaminguy Oct 07 '11 at 20:59

score 2 · Answer 2 · edited May 23 '17 at 12:32

You should check this answer How to make a CATransform3dMakeRotation rotate the other way? And chain together

I think that your problem is related with: "When you are working with a transform directly, Core Animation will interpolate the transform from the current value to the specified transform. It will find the shortest path to get to that transform, which will restrict the animation direction. If you try to animate the same transform property twice, the second value will simply override the first, not combine the two transforms together."

score 1 · Answer 3 · answered Sep 13 '13 at 10:31

use this:-

  rotatingView.layer.anchorPoint = CGPointMake(0.0f, 0.0f);
    rotatingView.center = CGPointMake(0,
                                       (rotatingView.center.y -
                                        (rotatingView.bounds.size.height/2.0f)));
    rotatingView.center = CGPointMake(0,
                                      (rotatingView.center.y-
                                       (rotatingView.bounds.size.height/2)));

// start the Page Open
[UIView beginAnimations:@"Animation" context:nil];
[UIView setAnimationDuration:13.0];
// set angle as per requirement
[rotatingView.layer setValue:[NSNumber numberWithInt:280]
                   forKeyPath:@"transform.rotation.x"];

[UIView commitAnimations];

score 0 · Answer 4 · answered Aug 04 '15 at 09:06

You just have to change your code from 1.0 to 0.0 inside completion block and woohoo all done.

 [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionTransitionNone animations:^{
            self.tableView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0);
        } completion:^(BOOL finished){
            NSLog(@"Finished first pi");
            [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionTransitionNone animations:^{
                self.tableView.layer.transform = CATransform3DMakeRotation(M_PI,0.0,0.0,0.0);
            }  completion:^(BOOL finished) {
                NSLog(@"Finished second pi");

            }];           

        }];

PiKey · Answer 5 · 2017-03-17T10:33:18.913

You can also approach this using the .Repeat and .Autoreverse animation options + setting animation's repeat count. Here's an example in Swift:

    UIView.animateWithDuration(time, delay: 0, options: [.Repeat, .Autoreverse], animations: {
        UIView.setAnimationRepeatCount(3)
        self.view.layer.transform = CATransform3DMakeRotation(CGFloat(M_PI), 1, 0, 0)
    }) { (completed) in
        // completion
    }

Rotate a UIView on its X-axis(Horizontal axis)

5 Answers5