iOS 動(dòng)畫三:transitions 動(dòng)畫

轉(zhuǎn)場動(dòng)畫 transitions

前兩節(jié),我們學(xué)習(xí)了怎樣基于屬性(eg. postion 及 alpha)創(chuàng)建動(dòng)畫,但是如果我們想在增加與刪除 view 的時(shí)候進(jìn)行動(dòng)畫該怎么辦呢?

本節(jié)我們講講 transitions 動(dòng)畫,它可以解決上面提出的問題。

transitions 是可以應(yīng)用于 views 的預(yù)定義動(dòng)畫。這些預(yù)定義動(dòng)畫不會(huì)嘗試在視圖的開始和結(jié)束狀態(tài)之間插入阎毅。相反,我們可以自定義動(dòng)畫栋猖,使?fàn)顟B(tài)的各種變化顯得優(yōu)雅自然净薛。

要使屏幕上添加的新視圖具有動(dòng)畫效果,可以調(diào)用像 addSubview(view) 這樣的方法蒲拉。然而使用轉(zhuǎn)場動(dòng)畫的不同之處在于,我們可以選擇一個(gè)預(yù)定義的轉(zhuǎn)場效果燃领,并將其作用于 animation container view 锦援。

當(dāng)轉(zhuǎn)場動(dòng)畫執(zhí)行時(shí),容器視圖及其子視圖具有動(dòng)畫效果曼库。


var animationContainerView: UIView!

override func viewDidLoad() { 
     super.viewDidLoad() //set up the animation container      
     animationContainerView = UIView(frame: view.bounds) 
     animationContainerView.frame = view.bounds      
     view.addSubview(animationContainerView) 
}

override func viewDidAppear(_ animated: Bool) {    
     super.viewDidAppear(animated)

    //  create new view 
    let newView = UIImageView(image: UIImage(named: "banner"))   
    newView.center = animationContainerView.center

    //  add the new view via transition 
   UIView.transition(with: animationContainerView, duration: 0.33,options:   
       [.curveEaseOut, .transitionFlipFromBottom], animations: {    
       self.animationContainerView.addSubview(newView) 
   }, completion: nil)
}

我們調(diào)用 transition(with:duration:options:animations:completion:) 創(chuàng)建 transition 動(dòng)畫毁枯。

prede?ned transitions option 有以下幾種選擇:

  • .transitionFlipFromLeft
  • .transitionFlipFromRight
  • .transitionCurlUp
  • .transitionCurlDown
  • .transitionCrossDissolve
  • .transitionFlipFromTop
  • .transitionFlipFromBottom

上面是添加視圖示例,如果刪除視圖叮称,則可以這樣:

// remove the view via transition
UIView.transition(with: animationContainerView, duration: 0.33, options:  
     [.curveEaseOut, .transitionFlipFromBottom], animations: {         
    self.newView.removeFromSuperview() 
}, completion: nil )

Hiding/showing a view 可以這樣:

// hide the view via transition
UIView.transition(with: self.newView, duration: 0.33, options: [.curveEaseOut,    
     .transitionFlipFromBottom], animations: { 
    self.newView.isHidden = true 
}, completion: nil )

Replacing a view with another view 可以這樣:

//replace via transition 
UIView.transition(from: oldView, to: newView, duration: 0.33, options: .transitionFlipFromTop, completion: nil)

轉(zhuǎn)場動(dòng)畫是 UIKit 中可以創(chuàng)建 3d 動(dòng)畫的唯一方法种玛。

transitions

附:精彩 demo 下載

參考:

  1. iOS 視圖控制器轉(zhuǎn)場詳解
  2. iOS自定義 Transitions 動(dòng)畫總結(jié)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市瓤檐,隨后出現(xiàn)的幾起案子赂韵,更是在濱河造成了極大的恐慌,老刑警劉巖挠蛉,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件祭示,死亡現(xiàn)場離奇詭異,居然都是意外死亡谴古,警方通過查閱死者的電腦和手機(jī)绍移,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進(jìn)店門悄窃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蹂窖,你說我怎么就攤上這事恩敌∷膊猓” “怎么了月趟?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長恢口。 經(jīng)常有香客問我,道長耕肩,這世上最難降的妖魔是什么因妇? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任猿诸,我火速辦了婚禮址芯,結(jié)果婚禮上谷炸,老公的妹妹穿的比我還像新娘旬陡。我一直安慰自己,他們只是感情好画拾,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布蜜另。 她就那樣靜靜地躺著,像睡著了一般耸序。 火紅的嫁衣襯著肌膚如雪罢坝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天众弓,我揣著相機(jī)與錄音滨达,去河邊找鬼画株。 笑死,一個(gè)胖子當(dāng)著我的面吹牛诗祸,可吹牛的內(nèi)容都是我干的肘习。 我是一名探鬼主播养葵,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼归露,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了往果?” 一聲冷哼從身側(cè)響起疆液,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎棚放,沒想到半個(gè)月后枚粘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡飘蚯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年馍迄,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了福也。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,754評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡攀圈,死狀恐怖暴凑,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情赘来,我是刑警寧澤现喳,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布嗦篱,位于F島的核電站,受9級特大地震影響幌缝,放射性物質(zhì)發(fā)生泄漏灸促。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一涵卵、第九天 我趴在偏房一處隱蔽的房頂上張望浴栽。 院中可真熱鬧,春花似錦轿偎、人聲如沸典鸡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽萝玷。三九已至,卻和暖如春英遭,著一層夾襖步出監(jiān)牢的瞬間间护,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工挖诸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留汁尺,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓多律,卻偏偏與公主長得像痴突,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子狼荞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評論 2 354