iOS / Objective-C：在barbutton中同時顯示兩個圖像

Question

我正在嘗試創建一個動畫效果，其中UIBarButton臨時更改為其他圖像，然后再次更改回。 我正在使用在情節提要中創建的條形按鈕。 由於uibarbuttons繼承自NSObject而不是UIView，因此，我首先將常規按鈕分配給uibarbutton。 這使我可以訪問UIView屬性。 一切正常。

要制作動畫，我要連續制作四個動畫。 淡入淡出第一個按鈕，淡入第二個按鈕，淡出第二個按鈕，然后再次淡入第一個按鈕。

問題在於，加載第二個按鈕時，它還會同時顯示第一個按鈕，使兩個按鈕相互疊加。 這真的很奇怪，我不知道是什么原因造成的。 這是代碼：

//I. Fade out first image
     [UIView animateWithDuration:0.2
                          delay:1.0
                        options: UIViewAnimationCurveEaseOut
                     animations:^{
                         self.hamburgerButton.customView.alpha=0;
                     }
                     completion:^(BOOL finished) {
  //II. Fade in second image.
                          [self.hamButton setBackgroundImage:nil forState:UIControlStateNormal];
                          [self.hamButton setBackgroundImage:secondImage forState:UIControlStateNormal];

                         [UIView animateWithDuration:0.6
                                               delay:0.0
                                             options: UIViewAnimationCurveEaseOut
                                          animations:^{
                                              self.hamburgerButton.customView.alpha=1;
                                          }
                                          completion:^(BOOL finished) {

    //III. Fade out second image
                               [UIView animateWithDuration:0.6
                               delay:0.0//was 2
                               options: UIViewAnimationCurveEaseOut
                               animations:^{
                               self.hamburgerButton.customView.alpha=0;
                               }
                               completion:^(BOOL finished) {

  //IV. Fade in First Image
                                [self.hamButton setBackgroundImage:firstImage forState:UIControlStateNormal];

                                [UIView animateWithDuration:0.6
                                delay:0.0//was 2
                                options: UIViewAnimationCurveEaseOut
                                animations:^{
                                self.hamburgerButton.customView.alpha=1;
                                }
                                completion:^(BOOL finished) {    
                               }];                
                               }];
                }];       
                }];

Answer 1

而不是設置相同按鈕的圖像，而是使用兩個單獨的按鈕。 將它們添加到UIView中。 將需要淡入淡出的一個放在Alpha 0的后面，將需要淡入淡出的一個放在Alpha 1的前面。

點擊時，將前按鈕的alpha動畫為零，同時將第二個按鈕的alpha動畫為1。動畫完成后，將按鈕帶回到前面。

這是可以在obj-c中完成的方法：

 @interface ViewController ()
@property (strong, nonatomic) IBOutlet UIBarButtonItem *barButtonItem;
@property (strong, nonatomic) UIView *customView;
@property (strong, nonatomic) UIButton *menuButton;
@property (strong, nonatomic) UIButton *closeMenuButton;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _menuButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [_menuButton setImage:[UIImage imageNamed:@"menu"] forState:UIControlStateNormal];
    [_menuButton addTarget:self action:@selector(menuButtonTapped) forControlEvents:UIControlEventTouchUpInside];

    _closeMenuButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [_closeMenuButton setImage:[UIImage imageNamed:@"menu-back"] forState:UIControlStateNormal];
    [_closeMenuButton addTarget:self action:@selector(closeMenuButtonTapped) forControlEvents:UIControlEventTouchUpInside];
    _closeMenuButton.alpha = 0.0;

    _customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
    _closeMenuButton.frame = _customView.bounds;
    _menuButton.frame = _customView.bounds;
    [_customView addSubview:_closeMenuButton];
    [_customView addSubview:_menuButton];

    _barButtonItem.customView = _customView;
}

- (void)menuButtonTapped {
    NSLog(@"Menu button tapped");

    [UIView animateWithDuration:0.5 animations:^{
        _menuButton.alpha = 0.0;
        _closeMenuButton.alpha = 1.0;
    } completion:^(BOOL finished) {
        [_customView bringSubviewToFront:_closeMenuButton];
    }];
}

- (void)closeMenuButtonTapped {
    NSLog(@"Close menu button tapped");
    [UIView animateWithDuration:0.5 animations:^{
        _closeMenuButton.alpha = 0.0;
        _menuButton.alpha = 1.0;
    } completion:^(BOOL finished) {
        [_customView bringSubviewToFront:_menuButton];
    }];
}
@end

這是我在Swift中實現的方法：

class ViewController: UIViewController {

    @IBOutlet var barButtonItem: UIBarButtonItem!

    let menuButton = UIButton.init(type: .custom)
    let backMenuButton = UIButton(type: .custom)
    let customView = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        menuButton.setImage(#imageLiteral(resourceName: "menu"), for: .normal)
        menuButton.addTarget(self, action: #selector(menuButtonTapped), for: .touchUpInside)

        backMenuButton.setImage(#imageLiteral(resourceName: "menu-back"), for: .normal)
        backMenuButton.addTarget(self, action: #selector(backMenuButtonTapped), for: .touchUpInside)



        backMenuButton.frame = customView.bounds
        customView.addSubview(backMenuButton)
        backMenuButton.alpha = 0

        menuButton.frame = customView.bounds
        customView.addSubview(menuButton)

        self.barButtonItem.customView = customView
    }

    @objc func menuButtonTapped()  {
        print("Menu button tapped")
        UIView.animate(withDuration: 0.5, animations: {
            self.menuButton.alpha = 0.0
            self.backMenuButton.alpha = 1.0
        }) { (finished) in
            self.customView.bringSubview(toFront: self.backMenuButton)
        }
    }

    @objc func backMenuButtonTapped() {
        print("Back menu button tapped")
        UIView.animate(withDuration: 0.5, animations: {
            self.backMenuButton.alpha = 0.0
            self.menuButton.alpha = 1.0
        }) { (finished) in
            self.customView.bringSubview(toFront: self.menuButton)
        }
    }
}

結果：