Rotating UIButton for 180 degrees and rotating it back

Question

I have UIButton, that i wish to rotate in one direction for 180 degrees, and back also for 180 degrees. I have been doing animations for a while using CABasicAnimation, but this time i wanted to do it with transforms. Here is the code that i have written:

- (IBAction)blurAction:(id)sender {
    if (self.blurActive) {
        [UIView animateWithDuration:0.1 animations:^{
            self.blurView.alpha = 0;
            self.blurButton.transform = CGAffineTransformMakeRotation(M_PI);
        } completion:^(BOOL finished) {
            self.blurActive = NO;
        }];
    }
    else {
        [UIView animateWithDuration:0.1 animations:^{
            self.blurView.alpha = 1;
            self.blurButton.transform = CGAffineTransformMakeRotation(-M_PI);
        } completion:^(BOOL finished) {
            self.blurActive = YES;
        }];
    }
}

It works the first time, but second time i press the button, nothing happens. Can someone explain what I am doing wrong here?

Answer 1

The easiest way to achieve this effect is just to rotate a tiny, tiny amount less than 180°:

- (IBAction)toggle:(UIButton *)sender {
    [UIView animateWithDuration:0.2 animations:^{
        if (CGAffineTransformEqualToTransform(sender.transform, CGAffineTransformIdentity)) {
            sender.transform = CGAffineTransformMakeRotation(M_PI * 0.999);
        } else {
            sender.transform = CGAffineTransformIdentity;
        }
    }];
}

Result:

Answer 2

Here is the Swift3 code for @rob mayoff solution.

   @IBAction func fooButton(_ sender: Any) {
        UIView.animate(withDuration:0.1, animations: { () -> Void in
            if sender.transform == .identity {
                sender.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI * 0.999))
            } else {
                sender.transform = .identity
            }
        })
    }

Swift4

M_PI is deprecated and replaced with Double.pi

@IBAction func fooButton(_ sender: Any) {
    UIView.animate(withDuration:0.1, animations: { () -> Void in
        if sender.transform == .identity {
            sender.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi * 0.999))
        } else {
            sender.transform = .identity
        }
    })
 }

Answer 3

M_PI and -M_PI will have the same visual effect

The turning back to it's original position should be

self.blurButton.transform = CGAffineTransformMakeRotation(0);

--EDIT--

To animate the counter clockwise rotation, you can use -2*M_PI

self.blurButton.transform = CGAffineTransformMakeRotation(-2*M_PI);

Answer 4

Turning UIButton 180º

UIButton.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi))

Turning UIButton 0º or back again

UIButton.transform = CGAffineTransform(rotationAngle: 0)

Example to turn animate

if cardViewModel.getBottomMenuVisibility() {
            [UIView .transition(
                with: bottomMenuView,
                duration: 0.3,
                options: .transitionCrossDissolve,
                animations: {
                    // Turn UIButton upside down
                    self.bottomMenu.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi))
            },
                completion: nil)]
    }
    else {
        [UIView .transition(
            with: bottomMenuView,
            duration: 0.3,
            options: .transitionCrossDissolve,
            animations: {
                // Turn UIButton back to normal
                self.bottomMenu.transform = CGAffineTransform(rotationAngle: 0)
        },
            completion: nil)]
    }

You can check on my code this example : https://github.com/issuran/Scrum-Geek-Poker/blob/0d032a4b4edcf75cebae1524131f4fe6be3a5edf/Scrum%20Geek%20Poker/Features/CardCollection/View/MainScreenViewController.swift