CATransition轉場動畫

CATransition轉場動畫概述

---

• 簡介

  • CATransition又稱轉場動畫，是CAAnimation的子類，可以直接使用
  • 轉場動畫主要用於為圖層提供移入/移出屏幕的動畫效果
  • 轉場動畫常見的應用是UINavigationController

• 注意事項

  • 轉場動畫的默認過渡方式為淡出方式（kCATransitionFade）

  • 可以使用常量形式或字符串形式給轉場動畫的type屬性賦值，如

    • kCATransitionPush，常量形式
    • @"push"，字符串形式

  • 官方文檔中只提供了四種轉場動畫過渡方式的常量，如圖

    

  • 動畫的終點值必須大於等於起點值，否則沒有動畫效果

轉場動畫常用的屬性

---

• type(NSString *)，動畫的過渡方式
• subtype(NSString *)，動畫的過渡方向
• startProgress(float)，動畫起點，取值范圍為0~1，表示在整個動畫中的比例
• endProgress(float)動畫終點，取值范圍為0~1，表示在整個動畫中的比例

轉場動畫的過渡方式

---

• fade

  • 交叉淡化過渡
  • 不支持過渡方向
  • 對應的常量為kCATransitionFade

• push

  • 新視圖把舊視圖推出去
  • 對應的常量為kCATransitionPush

• moveIn

  • 新視圖移到舊視圖上面
  • 對應的常量為kCATransitionMoveIn

• reveal

  • 將舊視圖移開顯示下邊的新視圖
  • 對應的常量為kCATransitionReveal

• cube

  • 立方體反轉效果

• oglFlip

  • 上下左右反轉效果

• suckEffect

  • 收縮效果，如一塊布被抽走
  • 不支持過渡方向

• rippleEffect

  • 滴水效果
  • 不支持過渡方向

• pageCurl

  • 向上翻頁效果

• pageUnCurl

  • 向下翻頁效果

• cameraIrisHollowOpen

  • 相機鏡頭打開效果
  • 不支持過渡方向

• cameraIrisHollowClose

  • 相機鏡頭關閉效果
  • 不支持過渡方向

轉場動畫的過渡方向

---

• kCATransitionFromRight，右
• kCATransitionFromLeft，左
• kCATransitionFromTop，上
• kCATransitionFromBottom，下

示例

---

• 效果圖

  

• 實現步驟

  • 通過storyboard創建UIImageView控件，並擁有它

  @property (weak, nonatomic) IBOutlet UIImageView *imageView;

  • 更改imageView的image屬性

  //點擊屏幕時，更換圖片 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { //控制圖片循環展示 static NSInteger i = 2; if (i == 4) { i = 1; } //更換圖片 NSString *imageName = [NSString stringWithFormat:@"%zd", i]; self.imageView.image = [UIImage imageNamed:imageName]; i++; //添加動畫 [self setupTransition]; }

  • 實現轉場動畫代碼

  - (void)setupTransition { CATransition *animation = [CATransition animation]; //設置動畫的過渡方式 animation.type = @"oglFlip"; //設置動畫的過渡方向 animation.subtype = kCATransitionFromRight; //設置動畫時長 animation.duration = 0.5; //將動畫添加到圖層上 [self.imageView.layer addAnimation:animation forKey:nil]; }