Rotating UIButton for 180 degrees and rotating it back - ios

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

Answer 5

To 'unrotate' the view set the transform to the constant CGAffineTransformIdentity , which is a transform of zero. This is the beauty of working with transforms, you don't need to calculate the way back, just undo what you already did.

Answer 6

You can not actually achieve this with transforms as transforms holds only information about end state. They do not tell us which direction we should use to make e.g. the rotation.
The best option to achieve 180 degrees forth and back rotation behaviour is to use CABasicAnimation.
Here's the example:
func rotateImage(forward: Bool) {
let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
rotationAnimation.fromValue = forward ? 0.0 : CGFloat.pi
rotationAnimation.toValue = forward ? CGFloat.pi : 0.0
rotationAnimation.fillMode = kCAFillModeForwards
rotationAnimation.isRemovedOnCompletion = false
rotationAnimation.duration = 0.5
handleImageView.layer.add(rotationAnimation, forKey: "rotationAnimation")
}

Answer 7

Swift 4+
#IBAction private func maximizeButtonAction(_ sender: UIButton) {
UIView.animate(withDuration: 0.2, animations: {
sender.transform = sender.transform == .identity ? CGAffineTransform(rotationAngle: CGFloat(Double.pi * 0.999)) : .identity
})
}