TabBar圖標在Swift中選擇類似Twitter應用程序的反彈效果

Question

如何在創建一個標籤欄圖標彈跳效果，如Twitter應用程序，當我點擊其中一個？看起來像縮小了，然後恢復正常。

謝謝。

Answer 1

嘿，這不是完美的代碼，但應該給你一個關於如何實現自定義TabBarViewController的想法。我沒有寫視圖佈局部分，所以你應該處理它，並且選項卡動畫不在這裏。

class TabBarViewController: UIViewController, TabBarViewDelegate { 

    private var containerView: UIView! 
    private var tabBar: TabBarView! 

    var selectedTabIndex: Int! { 
     didSet { 
      if oldValue != nil && oldValue != selectedTabIndex { 
       let previousVc = childViewControllers[oldValue] 
       previousVc.beginAppearanceTransition(false, animated: false) 
       previousVc.view.removeFromSuperview() 
       previousVc.endAppearanceTransition() 
      } 

      let vc = childViewControllers[selectedTabIndex] 
      vc.beginAppearanceTransition(true, animated: false) 
      containerView.addSubview(vc.view) 
      vc.endAppearanceTransition() 
     } 
    } 

    override func loadView() { 
     let viewControllers = [YourViewController1(), YourViewController2()] 

     containerView = UIView() 

     tabBar = TabBarView(numberOfTabs: viewControllers.count) 
     tabBar.delegate = self 

     viewcontrollers.forEach { 
      addChildViewController($0) 
      $0.didMove(toParentViewController: self) 
     } 

     view = UIView() 
     view.addSubview(containerView) 
     view.addSubview(tabBar) 

     selectedTabIndex = 0 
    } 

    func didSelect(tab: Int) { 
     if selectedTabIndex != tab { 
      selectedTabIndex = tab 
     } 
    } 
} 

protocol TabBarViewDelegate: class { 
    func didSelect(tab: Int) 
} 

class TabBarView: UIView { 

    private let tabs: [TabBarItemView] 

    weak var delegate: TabBarViewDelegate? { 
     didSet { 
      tabs.forEach { 
       $0.delegate = delegate 
      } 
     } 
    } 

    init(numberOfTabs: Int) { 
     let tabs = (0...numberOfTabs).map({TabBarItemView(index: $0)}) 
     super.init(frame: .zero) 
     let tabsStackView = UIStackView(arrangedSubviews: tabs) //.horizontal axis 
     addSubview(tabsStackView) 
    } 
} 

class TabBarItemView: UIView { 

    weak var delegate: TabBarViewDelegate? 

    private let index: Int 
    private let imageView = UIImageView(image: UIImage(named: "")) 

    init(index: Int) { 
     self.index = index 
     super.init(frame: .zero) 

     let tap = UITapGestureRecognizer() 
     tap.addTarget(self, action: #selector(onSelected)) 
     gestureRecognizers = [tap] 
     addSubview(imageView) 
    } 

    @objc private func onSelected() { 
     //animate imageView 
     delegate?.didSelect(tab: index) 
    } 
} 

Answer 2

我知道如何做到這一點。輕鬆玩！
假設有有5個標籤欄項目，標籤是0,1,2,3,4，然後在你的標籤欄控制器：

class xxxVC: UITabBarController { 

     var storedImageViewArr:[UIImageView?] = [] 

    private var times = [Int].init(repeating: 0, count: 5) 
    private var tempTimes = [Int].init(repeating: 0, count: 5) 

    let bounceAnimation = CAKeyframeAnimation(keyPath: "transform.scale") 

    override func viewDidLoad() { 
      super.viewDidLoad() 

     // create image views 
    getImageView() 

    //set path 
     setPath() 
    }//xxxVC class over line 

    //custom functions 
    extension xxxVC{ 

    fileprivate func getImageView(){ 
times[0] = 1 
      storedImageViewArr = [0,1,2,3,4].map{ (offset) -> UIImageView in 
    let tempImageView = self.tabBar.subviews[offset].subviews.first as! UIImageView 
    tempImageView.contentMode = .center 
    return tempImageView 
      } 

    fileprivate func setPath(){ 

      bounceAnimation.values = [1.0 ,0.6, 0.9, 1.15, 0.95, 1.02, 1.0] 
      bounceAnimation.duration = TimeInterval(0.5) 
      bounceAnimation.calculationMode = kCAAnimationCubic 
     } 
    } 

    //UITabBarControllerDelegate 
    extension xxxVC{ 

     override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) { 

    //the arr in this count is sure, so it costs O(1) 
    if times[item.tag] == 0{ 
      setAnimation(at: item.tag) 
      times = tempTimes 
      times[item.tag] += 1;return 
     } 
    } 
    } 

所以，你可以做到這一點。