CATransition初識

轉(zhuǎn)場動畫主要用于不同的視圖場景之間的切換。比如我們經(jīng)常使用的PPT,每一頁的PPT都是可以作為一個獨立的場景，在這個單獨的場景中可以添加各種各樣的UI。但是當(dāng)這一頁展示完畢，需要進入到下一頁時，添加一個合適的過渡動畫會使得轉(zhuǎn)場的下過比較平滑。在ios中經(jīng)常使用CoreAnimation核心動畫中的CATransition實現(xiàn)這個功能。

CATransition使用

• （1）實例化CATransition，并設(shè)置相應(yīng)的轉(zhuǎn)場動畫的key。
• （2）設(shè)置合適的轉(zhuǎn)場動畫的屬性，比如動畫周期、過渡方向、動畫保持狀態(tài)等。
• （3）將動畫效果添加到相應(yīng)的視圖的Layer圖層中

在第一步設(shè)置動畫效果時候需要注意，ios提供了大量的的炫酷動畫效果，不過總體上來說可以分為共有API和私有API，共有API制作的APP可以直接上線，私有的API制作的APP有被拒的風(fēng)險。

共有API:

fade:淡入淡出效果，可以使用常量kCATransitionFade表示
push：推送效果，可以使用常量kCATransitionPush表示
reveal：揭開效果，可以使用常量kCATransitionReveal表示
movein：移動效果，可以使用常量kCATransitionMoveIn表示

私有API:

pageCurl:向上翻頁效果，只能用字符串表示
pageUnCurl:向下翻頁效果，只能用字符串表示
cube:立體翻轉(zhuǎn)效果，只能用字符串表示
oglFlip:翻轉(zhuǎn)效果，只能用字符串表示
suckEffect:收縮效果，只能用字符串表示
rippleEffect:水滴波紋效果，只能用字符串表示
cameraIrisHollowOpen:相機打開效果，只能用字符串表示
cameraIrisHollowClose:相機關(guān)閉效果，只能用字符串表示

在第二個步驟中，設(shè)置動畫的周期、最終狀態(tài)等屬性和CoreAnimation核心動畫中的CABasicAnimation類使用方法相同，這里主要介紹轉(zhuǎn)場動畫的方向?qū)傩栽O(shè)置。轉(zhuǎn)場動畫支持以下四種方向。

kCATransitionFromRight：從右側(cè)轉(zhuǎn)場
kCATransitionFromLeft：從左側(cè)轉(zhuǎn)場
kCATransitionFromTop：從頂部轉(zhuǎn)場
kCATransitionFromBottom：從底部轉(zhuǎn)場

第三部實現(xiàn)將動畫添加到指定的圖層上。如果想讓整個視圖控制器進行轉(zhuǎn)場，那么可以添加到當(dāng)前的self.view上,如果想對某個特定的圖層進行轉(zhuǎn)場，那么可以直接添加到相應(yīng)的圖層上。

實例

• 收縮效果

  
  
  jy_suckEffect.gif

• 水滴波紋效果

  
  
  jy_rippleEffect.gif

• 翻頁效果

  
  
  jy_page.gif

代碼

class ViewController: UITableViewController {

    let animationTypes = ["fade",
                          "push",
                          "reveal",
                          "movein",
                          "pageCurl",
                          "pageUnCurl",
                          "cube",
                          "oglFlip",
                          "suckEffect",
                          "rippleEffect",
                          "cameraIrisHollowOpen",
                          "cameraIrisHollowClose"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let transitionVC = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "CATransitionVC") as! CATransitionVC
        transitionVC.animationType = animationTypes[indexPath.row]
        self.navigationController?.pushViewController(transitionVC, animated: true)
    }

 @IBAction func startAnimationClick(_ sender: UIButton) {
        jyImageView.image = #imageLiteral(resourceName: "jy2")
        let animation = CATransition()
        animation.duration = 2
        animation.type = animationType
        animation.subtype = kCATransitionFromRight //設(shè)置當(dāng)前動畫的轉(zhuǎn)場方向
        self.view.layer.add(animation, forKey: nil)
    }

第一次簡單的轉(zhuǎn)場動畫就介紹到這里，后續(xù)的視圖過渡動畫會持續(xù)更新，demo也會后續(xù)跟新出。

Demo地址