iOS核心動畫－轉場動畫CATransition和組動畫CAAnimationGroup

本文轉載自：點擊打開鏈接

一、轉場動畫簡單介紹

CAAnimation的子類，用於做轉場動畫，能夠爲層提供移出屏幕和移入屏幕的動畫效果。iOS比Mac OS X的轉場動畫效果少一點

UINavigationController就是通過CATransition實現了將控制器的視圖推入屏幕的動畫效果

屬性解析:

type：動畫過渡類型

subtype：動畫過渡方向

startProgress：動畫起點(在整體動畫的百分比)

endProgress：動畫終點(在整體動畫的百分比)

 

二、轉場動畫代碼示例

1.界面搭建

2.實現代碼

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, assign) int index;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
- (IBAction)preOnClick:(UIButton *)sender;
- (IBAction)nextOnClick:(UIButton *)sender;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.index=1;
}

- (IBAction)preOnClick:(UIButton *)sender {
    self.index--;
    if (self.index < 1) {
        self.index = 7;
    }
    self.iconView.image = [UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg", self.index]];
    //創建核心動畫
    CATransition *ca = [CATransition animation];
    //告訴要執行什麼動畫
    //設置過度效果
    ca.type = @"cube";
    //設置動畫的過度方向（向左）
    ca.subtype = kCATransitionFromLeft;
    //設置動畫的時間
    ca.duration = 2.0;
    //添加動畫
    [self.iconView.layer addAnimation:ca forKey:nil];
}

//下一張
- (IBAction)nextOnClick:(UIButton *)sender {
    self.index++;
    if (self.index > 7) {
        self.index = 1;
    }
    self.iconView.image = [UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg", self.index]];
    
    //1.創建核心動畫
    CATransition *ca = [CATransition animation];
    //1.1告訴要執行什麼動畫
    //1.2設置過度效果
    ca.type = @"cube";
    //1.3設置動畫的過度方向（向右）
    ca.subtype = kCATransitionFromRight;
    //1.4設置動畫的時間
    ca.duration = 2.0;
    //1.5設置動畫的起點
    ca.startProgress = 0.5;
    //1.6設置動畫的終點
//    ca.endProgress = 0.5;
    //2.添加動畫
    [self.iconView.layer addAnimation:ca forKey:nil];
}
@end

點擊上一張，或者下一張的時候，展示對應的動畫效果。

三、組動畫簡單說明

CAAnimation的子類，可以保存一組動畫對象，將CAAnimationGroup對象加入層後，組中所有動畫對象可以同時併發運行

屬性解析：

animations：用來保存一組動畫對象的NSArray

默認情況下，一組動畫對象是同時運行的，也可以通過設置動畫對象的beginTime屬性來更改動畫的開始時間

四、分組動畫代碼示例

代碼：

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *iconView;
@end

@implementation NJViewController
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 平移動畫
    CABasicAnimation *a1 = [CABasicAnimation animation];
    a1.keyPath = @"transform.translation.y";
    a1.toValue = @(100);
    // 縮放動畫
    CABasicAnimation *a2 = [CABasicAnimation animation];
    a2.keyPath = @"transform.scale";
    a2.toValue = @(0.0);
    // 旋轉動畫
    CABasicAnimation *a3 = [CABasicAnimation animation];
    a3.keyPath = @"transform.rotation";
    a3.toValue = @(M_PI_2);
    
    // 組動畫
    CAAnimationGroup *groupAnima = [CAAnimationGroup animation];
    groupAnima.animations = @[a1, a2, a3];
    
    //設置組動畫的時間
    groupAnima.duration = 2;
    groupAnima.fillMode = kCAFillModeForwards;
    groupAnima.removedOnCompletion = NO;
    
    [self.iconView.layer addAnimation:groupAnima forKey:nil];
}
@end

說明：平移-旋轉-縮放作爲一組動畫一起執行。

執行效果：