自定義TabBar動畫效果 - 頁面轉(zhuǎn)場(Swift)

前言:之前寫過一篇自定義TabBar動畫效果的博客OC版本,本篇換成Swift來實現(xiàn)動畫聚霜。思路大致相同,有需要可以去上篇博客中查看具體的邏輯本篇主要分享一下在Swift中核心代碼和與OC中區(qū)別珠叔。

分三步:

1:初始化:

  • 初始化TabBar控制器

  • 遵守UITabBarControllerDelegate代理協(xié)議蝎宇,實現(xiàn)代理方法

2:點擊動畫:

核心代碼

在代理方法tabBarController - didSelect viewController中找到對應(yīng)選中的tabBarButton并對其做核心動畫

核心代碼
/// 點擊動畫
func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
   
   tabBarButtonClick(tabBarButton: getTabBarButton())
   
}

private func getTabBarButton() -> UIControl {

   var tabBarButtons = Array<UIView>()
   for tabBarButton in tabBar.subviews {
       if (tabBarButton.isKind(of:NSClassFromString("UITabBarButton")!)){
           tabBarButtons.append(tabBarButton)
       }
   }
   return tabBarButtons[selectedIndex] as! UIControl
}
    
private func tabBarButtonClick(tabBarButton : UIControl) {
   
   for imageView in tabBarButton.subviews {
       if (imageView.isKind(of: NSClassFromString("UITabBarSwappableImageView")!)){
           let animation = CAKeyframeAnimation()
           animation.keyPath = "transform.scale"
           animation.duration = 0.3
           animation.calculationMode = CAAnimationCalculationMode.cubicPaced
           animation.values = [1.0,1.1,0.9,1.0]
           imageView.layer.add(animation, forKey: nil)
       }
   }
}
    

3:滑動動畫:

在代理方法tabBarController - animationControllerForTransitionFrom代理方法中做滑動動畫。

  • 這里可以創(chuàng)建一個類封裝tabBarVc的滑動動畫祷安,類似如下:
/// 滑動動畫
func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
   
   return DCSlideBarAnimation() //滑動動畫
}

在類DCSlideBarAnimation中去實現(xiàn)具體滑動動畫姥芥。

??DCSlideBarAnimation類中與OC的不同點:期初在設(shè)計OC滑動類的時候我設(shè)計一個UIRectEdge屬性來告訴類我當前選中的控制器Vc和選中前控制器Vc的一個方向偏移作為滑動動畫的dx。
??在swift中汇鞭,我取消了這個屬性凉唐,從而在類的內(nèi)部去去通過獲取當前TabVc的viewControllers的index來比較偏移方向庸追。
相比較更建議采用第二種方法,在上傳的代碼中我沒更改OC原來思路台囱,可以查看源碼進行對比淡溯。
核心代碼
// MARK: - 代理方法
extension DCSlideBarAnimation : UIViewControllerAnimatedTransitioning{
    
    /// 設(shè)置時間間隔
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
       return 0.15
    }
        
    /// 處理轉(zhuǎn)場
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
       
       guard let fromeVc = transitionContext.viewController(forKey: .from),
             let toVc = transitionContext.viewController(forKey: .to) else { return }
       
        
       guard let tabVc = UIApplication.shared.keyWindow?.rootViewController as? UITabBarController,
             let fromeIndex = tabVc.viewControllers?.index(where: { $0 == fromeVc}),
             let toIndex = tabVc.viewControllers?.index(where: { $0 == toVc}) else { return }
       
       guard let formView = transitionContext.view(forKey: .from),
             let toView = transitionContext.view(forKey: .to) else { return }
       
       let fromFrame : CGRect = formView.frame
       let toFrame : CGRect = toView.frame
    
      
       var offSet : CGVector?
       if toIndex > fromeIndex {
           offSet = CGVector(dx: -1, dy: 0)
       }else{
           offSet = CGVector(dx: 1, dy: 0)
       }
    
       guard let animOffSet = offSet else { return }
       formView.frame = fromFrame
    
       let ofDx : CGFloat = animOffSet.dx
       let ofDy : CGFloat = animOffSet.dy
       toView.frame = CGRect.offsetBy(toFrame)(dx: toFrame.size.width * ofDx * -1, dy: toFrame.size.height * ofDy * -1)
       transitionContext.containerView.addSubview(toView)
    
       let transitionDuration = self.transitionDuration(using: transitionContext)
       UIView.animate(withDuration: transitionDuration, animations: { //動畫
           
           formView.frame = CGRect.offsetBy(fromFrame)(dx: fromFrame.size.width * ofDx * 1, dy: fromFrame.size.height * ofDy * 1)
           toView.frame = toFrame;
    
       }) { (_) in
           transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
       }
    }
}

效果預覽(GIF)

效果預覽- 慢

OC版地址:自定義TabBar動畫效果 - 頁面轉(zhuǎn)場

博客地址

兩個版本代碼的項目地址:GitHub

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市簿训,隨后出現(xiàn)的幾起案子咱娶,更是在濱河造成了極大的恐慌,老刑警劉巖强品,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件膘侮,死亡現(xiàn)場離奇詭異,居然都是意外死亡择懂,警方通過查閱死者的電腦和手機喻喳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來困曙,“玉大人表伦,你說我怎么就攤上這事】独觯” “怎么了蹦哼?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長要糊。 經(jīng)常有香客問我纲熏,道長,這世上最難降的妖魔是什么锄俄? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任局劲,我火速辦了婚禮,結(jié)果婚禮上奶赠,老公的妹妹穿的比我還像新娘鱼填。我一直安慰自己,他們只是感情好毅戈,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布苹丸。 她就那樣靜靜地躺著,像睡著了一般苇经。 火紅的嫁衣襯著肌膚如雪赘理。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天扇单,我揣著相機與錄音商模,去河邊找鬼。 笑死,一個胖子當著我的面吹牛施流,可吹牛的內(nèi)容都是我干的凉倚。 我是一名探鬼主播,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼嫂沉,長吁一口氣:“原來是場噩夢啊……” “哼稽寒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起趟章,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤杏糙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蚓土,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體宏侍,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年蜀漆,在試婚紗的時候發(fā)現(xiàn)自己被綠了谅河。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡确丢,死狀恐怖绷耍,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鲜侥,我是刑警寧澤褂始,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站描函,受9級特大地震影響崎苗,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜舀寓,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一胆数、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧互墓,春花似錦必尼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽齿诞。三九已至酸休,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間祷杈,已是汗流浹背斑司。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宿刮。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓互站,卻偏偏與公主長得像,于是被迫代替她去往敵國和親僵缺。 傳聞我的和親對象是個殘疾皇子胡桃,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件磕潮、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,103評論 4 62
  • 文/林子 電視機里趙忠祥老師用獨具魅力的磁性嗓音在解說自然界中食物鏈的游戲規(guī)則:在遼闊的非洲草原上翠胰,一只雄性的獅子...
    芝麻的微光閱讀 303評論 0 3
  • 每次看劇里人吃牛肉, 內(nèi)心幾乎是奔潰的自脯。 牛肉的好吃都要溢出屏幕了之景, 好餓好餓,我開始吞口水了膏潮! 完全控制不住想吃...
    菊廠酒館閱讀 492評論 0 1
  • 終于把拖了很久的一件事辦了锻狗,來回路上耗時4個小時。 說不清楚內(nèi)心深處是什么感覺 隱隱的有一種懷疑焕参,房奴的身份負擔的...
    伊卡洛斯林閱讀 155評論 0 1