iOS開發(fā)中常用的動畫(轉(zhuǎn)場動畫)

好了捌斧,又給大家?guī)沓S玫膭赢嫞酒诘闹黝}是轉(zhuǎn)場動畫西土。下面來看

效果圖:
TransitionDemo.gif
介紹:

上圖中的動畫效果在開發(fā)中很常見讶舰,例如版本更新的彈窗,退出界面的提醒彈窗等翠储,因此將它們封裝成彈窗工具類绘雁。大家可以下載使用,使用起來也非常簡單~

git地址:

https://github.com/DragonTnT/LFTransitionViewController.git

使用方法:
步驟1

步驟1: 把以上4個文件拖入工程中援所;
步驟2: 創(chuàng)建一個繼承自 LFTransitionViewController 的控制器庐舟,并為它添加你想要彈出的彈窗

fileprivate let kScreenH: CGFloat = UIScreen.main.bounds.height   //屏幕高度
fileprivate let kScreennW: CGFloat = UIScreen.main.bounds.width   //屏幕寬度
fileprivate let kUpdateViewH: CGFloat = 397   //彈窗高度
fileprivate let kUpdateViewW: CGFloat = 330   //彈窗寬度

import UIKit

class TestViewController: LFTransitionViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(updateView)
        updateView.closeClosure = { [weak self] in
            self?.dismiss(animated: true, completion: nil)     //點擊關(guān)閉,關(guān)掉彈窗
        }
    }
   //自定義的彈窗住拭,并設(shè)定它的 frame
    lazy var updateView: UpdateView = {
        let view = Bundle.main.loadNibNamed(UpdateView.name, owner: nil, options: nil)?.first as! UpdateView
        view.frame = CGRect(x: (kScreennW - kUpdateViewW)/2, y: (kScreenH - kUpdateViewH)/2, width: kUpdateViewW, height: kUpdateViewH)
        return view
    }()    
}

步驟3: 創(chuàng)建彈窗控制器挪略,并在參數(shù)中選擇需要的效果,將彈窗控制器彈出

let vc = TestViewController(transitionStyle: .scaleChange)    //為transitionStyle選擇想要的效果
present(vc, animated: true, completion: nil)

就這么簡單滔岳,來試試吧杠娱。(^ ^)


內(nèi)容分析:

(為節(jié)省篇幅只截取部分代碼,如需要使用請拉取demo中的代碼)

1.首先來看 LFTransitionViewController
本文中的動畫都是基于控制器的轉(zhuǎn)場動畫谱煤,因此它是需要實現(xiàn)UIViewControllerTransitioningDelegate這個關(guān)鍵代理的(具體實現(xiàn)在代碼里)摊求。
同時重寫init方法,將transitionStyle這個參數(shù)設(shè)為必傳參數(shù)刘离,以此來選擇動畫效果

//動畫的效果類型
enum LFTransitionStyle: Int {
    case scaleChange    //比例變化
    case alphaChange    //透明度變化
    case topToBottom    //從上至下
    case bottomToTop    //從下至上
    case leftToRight    //從左至右
    case rightToLeft    //從右至左
}
class LFTransitionViewController: UIViewController {
    
    var transitionStyle: LFTransitionStyle!    //動畫效果類型
    
    init(transitionStyle: LFTransitionStyle) {
        super.init(nibName: nil, bundle: nil)
        self.transitioningDelegate = self
        self.modalPresentationStyle = .custom
        self.transitionStyle = transitionStyle
    }
}
// 3個必須要實現(xiàn)的代理方法
extension LFTransitionViewController: UIViewControllerTransitioningDelegate {
    //返回UIPresentationController室叉,實為陰影部分
    func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? {}     
    //動畫彈出的效果
    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {}   
    //動畫收起的效果
    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {}
}

2.接著來看TransitionForPositionTransitionForScaleOrAlpha
這兩個類是關(guān)鍵類,提供了所有的動畫效果硫惕,前面的是位置變化茧痕,后面的是比例和透明度的變化。必須要實現(xiàn)的代理是
UIViewControllerAnimatedTransitioning的3個代理方法

extension TransitionForScaleOrAlpha : UIViewControllerAnimatedTransitioning {
    //動畫時間
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {}
    //彈出彈窗的效果實現(xiàn)
    func animatedPresentWithContext(transitionContext: UIViewControllerContextTransitioning) {}
    //收起彈窗的效果實現(xiàn)
    func animatedDismissWithContext(transitionContext: UIViewControllerContextTransitioning) {}
}

3.PresentationVC是彈窗控制器的容器恼除,用來展示陰影效果踪旷,demo里同時封裝了毛玻璃效果,可供選擇

//背景樣式
enum presentBackGroundViewType: Int {
    case dimming = 0        //陰影
    case glass   = 1        //玻璃
}

其實可以總結(jié)一下轉(zhuǎn)場動畫的實現(xiàn)過程
1.控制器實現(xiàn)代理 UIViewControllerTransitioningDelegate
2.自定義工具類實現(xiàn)1中代理方法所需的UIViewControllerAnimatedTransitioningUIViewControllerAnimatedTransitioning
3.不要忘記把在控制器init方法中設(shè)置transitioningDelegate = selfmodalPresentationStyle = .custome
4.最后豁辉,present or dismiss 控制器

覺得有用的朋友令野,希望能點個贊哦 ??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市徽级,隨后出現(xiàn)的幾起案子彩掐,更是在濱河造成了極大的恐慌,老刑警劉巖灰追,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件堵幽,死亡現(xiàn)場離奇詭異狗超,居然都是意外死亡,警方通過查閱死者的電腦和手機朴下,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門努咐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人殴胧,你說我怎么就攤上這事渗稍。” “怎么了团滥?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵竿屹,是天一觀的道長。 經(jīng)常有香客問我灸姊,道長拱燃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任力惯,我火速辦了婚禮碗誉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘父晶。我一直安慰自己哮缺,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布甲喝。 她就那樣靜靜地躺著尝苇,像睡著了一般。 火紅的嫁衣襯著肌膚如雪埠胖。 梳的紋絲不亂的頭發(fā)上糠溜,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天,我揣著相機與錄音押袍,去河邊找鬼。 笑死凯肋,一個胖子當(dāng)著我的面吹牛谊惭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播侮东,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼圈盔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了悄雅?” 一聲冷哼從身側(cè)響起驱敲,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎宽闲,沒想到半個月后众眨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體握牧,經(jīng)...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年娩梨,在試婚紗的時候發(fā)現(xiàn)自己被綠了沿腰。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡狈定,死狀恐怖颂龙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情纽什,我是刑警寧澤措嵌,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站芦缰,受9級特大地震影響企巢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜饺藤,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一包斑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涕俗,春花似錦罗丰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至元镀,卻和暖如春绍填,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背栖疑。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工讨永, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人遇革。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓卿闹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親萝快。 傳聞我的和親對象是個殘疾皇子锻霎,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,086評論 2 355

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