Animation only images in UIBarButtonItem

Question

I have seen this effect in 2 applications and I REALLY want to find how to do this.

The animation is in the UIBarButtonItem and is for image only. The image is a + symbol and it rotates to X.

If you want to see the effect, you need to start a conversation with someone, and next to the text input is the + button for images and emoji. Or, for example, a video about the effect in another application, after clicking the bar button, you see that it rotates to X, http://www.youtube.com/watch?v=S8JW7euuNMo .

I figured out how to do this, but only on UIImageView, I have to turn off all autoresist, and the view should be centered, and then apply the rotation transform to it. I tried many ways to try to make it work in the bar element, and so far the best way is to add an instance of the image, set it up and set the view mode to the center and auto-detect, and then use this image for custom View Positions. But when I do this, the effect works, except that he does it, the image will go a little to the side, and will not stay where it already is. Ive tried to get the center before the animation and set it during the animation, but it does nothing.

Answer 1

So the answer to this question is that you have to instantiate the image and then adjust it without resizing and viewing in the center. Then add a custom image view to UIButton, and then use the button as a custom view for the panel item.

- (IBAction)animate { [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{ imageView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(45)); } completion:^(BOOL finished) { imageView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(0)); if ([imageView.image isEqual:[UIImage imageNamed:@"Add.png"]]) { imageView.image = [UIImage imageNamed:@"Close.png"]; } else imageView.image = [UIImage imageNamed:@"Add.png"]; }]; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Add.png"]]; imageView.autoresizingMask = UIViewAutoresizingNone; imageView.contentMode = UIViewContentModeCenter; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 40, 40); [button addSubview:imageView]; [button addTarget:self action:@selector(animate) forControlEvents:UIControlEventTouchUpInside]; imageView.center = button.center; barItem = [[UIBarButtonItem alloc] initWithCustomView:button]; navItem.rightBarButtonItem = barItem; } 

Answer 2

Recently I had to do the same in Swift. I created a tutorial that includes start-up and final projects, and step-by-step with some tips. The code is as follows:

 @IBOutlet weak var rightBarButton: UIBarButtonItem! { didSet { let icon = UIImage(named: "star") let iconSize = CGRect(origin: CGPointZero, size: icon!.size) let iconButton = UIButton(frame: iconSize) iconButton.setBackgroundImage(icon, forState: .Normal) rightBarButton.customView = iconButton rightBarButton.customView!.transform = CGAffineTransformMakeScale(0, 0) UIView.animateWithDuration(1.0, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 10, options: .CurveLinear, animations: { self.rightBarButton.customView!.transform = CGAffineTransformIdentity }, completion: nil ) iconButton.addTarget(self, action: "tappedRightButton", forControlEvents: .TouchUpInside) } } func tappedRightButton(){ rightBarButton.customView!.transform = CGAffineTransformMakeRotation(CGFloat(M_PI * 6/5)) UIView.animateWithDuration(1.0) { self.rightBarButton.customView!.transform = CGAffineTransformIdentity } } 

Answer 3

I wanted to keep the extended cut size, which provides an inline view of UIBarButtonItem (e.g. -initWithBarButtonSystemItem:target:action: versus -initWithCustomView: .

Here is a basic implementation of my code.

 - (void)setup { self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(navigationBarRightAction)]; } - (void)navigationBarRightAction { UIView *itemView = [self.navigationItem.rightBarButtonItem performSelector:@selector(view)]; UIImageView *imageView = [itemView.subviews firstObject]; if (self.shouldRotate) { imageView.contentMode = UIViewContentModeCenter; imageView.autoresizingMask = UIViewAutoresizingNone; imageView.clipsToBounds = NO; imageView.transform = CGAffineTransformMakeRotation(M_PI_4); } else { imageView.transform = CGAffineTransformIdentity; } }