TabBar 아이콘 스위프트의 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 
     } 
    } 
    } 

그래서, 당신은 그것을 할 수 있습니다.