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

说明：平移-旋转-缩放作为一组动画一起执行。

执行效果：