core animation初识之CATransition

本文转载自《iOS疯狂讲义》使用CATransition

CATransiton通常用于通过CALayer控制UIView内控件的过渡动画，比如删除子控件，添加子控件，切换两个子控件等。

使用CATransition控制 UIView内子控件的过渡动画的步骤如下。

1， 创建CATransition对象

2， 为CATransition设置type和subtype两个属性，其中，type指定动画类型，subtype指定动画移动方向。

3，如果不需要动画执行整个过程（就是只要动画执行到中间部分就停止），可以指定startProgress（动画的开始进度），endProgress（动画的结束进度）属性。

4，调用UIView的layer属性的addAnimation：forKey:方法控制该UIView内子控件的过渡动画。addAnimation:forKey:方法的第一个参数为CAAnimation对象，第二个参数用于为该动画对象执行一个唯一标识。


CAAnimation提供了如下属性和方法。

removedOnCompletion:该属性用于指定该动画完成时是否从目标CALayer上删除该动画。

timeFunction:该属性用于指定一个CAMediaTimingFunction对象，该对象负责控制动画变化的步长。

-animationDidStart:(CAAnimation *)theAnimation: 该动画开始时将会回调该方法。开发者可以重写该方法执行自定义处理。

-animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag: 该动画结束时将会回调该方法。开发者可以重写该方法执行自定义处理。

CATranstion的type属性用于控制 动画类型，它支持如下值（每个值代表一种类型的动画）。

kCATransitionFade: 通过渐隐效果控制子组件的过渡。这是默认的属性值。

kCATransitionMoveIn: 通过移入动画控制子组件的过渡。

kCATransitionPush: 通过推入动画控制子组件的过渡。

kCATransitionReveal: 通过揭开动画控制子组件的过渡。

除此之外，该属性还支持如下私有动画。

cube: 通过立方体旋转动画控制子组件的过渡。

suckEffect: 通过收缩动画（就像吸入效果）控制子组件的过渡。

oglFlip: 通过翻转动画控制子组件的过渡。

rippleEffect: 通过水波动画控制子组件的过渡。

pageCurl: 通过页面揭开动画控制子组件的过渡。

pageUnCurl: 通过放下页面动画控制子组件的过渡。

cameraIrisHollowOpen: 通过镜头打开动画控制子组件的过渡。

cameraIrisHollowClose: 通过镜头关闭动画控制子组件的过渡。

CATransiton的subtype属性用于控制动画方向，它这次如下值。

kCATransitionFromRight

kCATransitionFromLeft

kCATransitionFromTop

kCATransitionFromBottom

实际上，控制UIView内子控件的过渡还有另一种方式，通过UIView 的beginAnimations：context:与commitAnimations 方法控制——如果子组件的过渡动画不是特别复杂，只需要实现一些简单的动画，即可通过这种方式控制。这种方式的动画如下如下几步：

1，调用UIview的beginAnimation方法开始动画。

2，调用UIView的setAnimationTransition:forView:cache:设置动画类型，setAnimationCurve:方法设置动画的变化曲线。除此之外，UIView还提供了系列setAnimationXxx方法来设置动画的持续时间，延迟时间，重复次数等属性。

上面的setAnimationTransition:forView:cache:方法用于控制UIView的过渡动画的动画方式，它支持如下动画方式：

UIViewAnimationTransitionNone:不是用动画

UIViewAnimationTransitionFlipFromLeft:指定从左边滑入的动画过渡方式。

UIViewAnimationTransitionFlipFromRight:指定从右边滑出的动画过渡方式。

UIViewAnimationTransitionCurlUp:指定“翻开书页”的动画过渡方式。

UIViewAnimationTransitionCurlDown:指定“放下书页”的动画过渡方式。

setAnimationCurve:方法用于控制动画的变化曲线，也就是控制动画的变化速度，该方法支持如下几种变化速度。

UIViewAnimationCurveEaseInOut:动画先比较缓慢，然后逐渐加快.

UIviewAnimationCurveEaseIn:动画逐渐变慢。

UIViewAnimationCurveEaseOut:动画逐渐加快。

UIViewAnimationCurveLinear:匀速动画。

实例代码如下：

//
//  ViewController.m
//  CATransitionDemo
//
//  Created by Jack on 15/12/4.
//  Copyright © 2015年 Jack. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView *magentaView = [[UIView alloc] initWithFrame:self.view.bounds];
magentaView.backgroundColor = [UIColor magentaColor];
[self.view addSubview:magentaView];

UIView *grayView = [[UIView alloc] initWithFrame:self.view.bounds];
grayView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:grayView];
NSArray *bnTitleArray =[NSArray arrayWithObjects:@"添加",@"翻页",@"移入",@"揭开",@"立方体",@"收缩",@"翻转",@"水波", nil];
NSMutableArray *bnArray =[[NSMutableArray alloc] init];
//获取屏幕的内部高度
CGFloat totalHeight = [UIScreen mainScreen].bounds.size.height;
//创建8个按钮，并将按钮添加到NSMutableArray集合中
for (int i=0; i<8; i++) {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn setTitle:[bnTitleArray objectAtIndex:i] forState:UIControlStateNormal];
NSInteger row =i/4;
NSInteger col =i%4;
btn.frame = CGRectMake(5+col*80, totalHeight-(2-row)*45-20, 70, 35);

[self.view addSubview:btn];
[bnArray addObject:btn];

}

//为8个按钮分别绑定不同的事件处理方法
[[bnArray objectAtIndex:0] addTarget:self action:@selector(add:)forControlEvents:UIControlEventTouchUpInside];
[[bnArray objectAtIndex:1] addTarget:self action:@selector(curl:)forControlEvents:UIControlEventTouchUpInside];
[[bnArray objectAtIndex:2] addTarget:self action:@selector(move:)forControlEvents:UIControlEventTouchUpInside];
[[bnArray objectAtIndex:3] addTarget:self action:@selector(reveal:)forControlEvents:UIControlEventTouchUpInside];
[[bnArray objectAtIndex:4] addTarget:self action:@selector(cube:)forControlEvents:UIControlEventTouchUpInside];
[[bnArray objectAtIndex:5] addTarget:self action:@selector(suck:)forControlEvents:UIControlEventTouchUpInside];
[[bnArray objectAtIndex:6] addTarget:self action:@selector(oglFlip:)forControlEvents:UIControlEventTouchUpInside];
[[bnArray objectAtIndex:7] addTarget:self action:@selector(ripple:)forControlEvents:UIControlEventTouchUpInside];

}

-(void)add:(id)sender{

//开始执行动画
[UIView beginAnimations:@"animation" context:nil];
[UIView setAnimationDuration:1.0f];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];  //控制UIview内过渡动画的类型
//设置动画的变化曲线
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView commitAnimations];

}

-(void)curl:(id)sender{
//开始执行动画
[UIView beginAnimations:@"animation" context:nil];
[UIView setAnimationDuration:1.0f];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];   //控制UIView内过渡动画的类型
//设置动画的变化曲线
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
//交换视图控制器所显示的UIView中两个子控件的位置
[self.view exchangeSubviewAtIndex:3 withSubviewAtIndex:2];
[UIView commitAnimations];

}
-(void)move:(id)sender{

CATransition *transition = [CATransition animation];
transition.duration = 2.0f;
transition.type =kCATransitionMoveIn;   //使用kCATransitonMoveIn动画
//指定动画方向，从左向右
transition.subtype = kCATransitionFromLeft;
[self.view.layer addAnimation:transition forKey:@"animation"];
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];

}
-(void)reveal:(id)sender{

CATransition *transition =[CATransition animation];
transition.duration =2.0f;
transition.type =kCATransitionReveal;  //使用kCATransitionReveal动画
transition.subtype =kCATransitionFromTop;   //指定动画方向，从上到下
[self.view.layer addAnimation:transition forKey:@"animation"];
//交换视图控制器所显示的UIView中两个子控件的位置
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];

}
-(void)cube:(id)sender{
CATransition *transition = [CATransition animation];
transition.duration =2.0f;
transition.type = @"cube";
transition.subtype = kCATransitionFromLeft;  // 指定动画方向从左到右
[self.view.layer addAnimation:transition forKey:@"animation"];
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];

}
-(void)suck:(id)sender{
CATransition *transiton = [CATransition animation];
transiton.duration = 2.0f;
transiton.type =@"suckEffect";
[self.view.layer addAnimation:transiton forKey:@"animation"];
//交换视图控制器所显示的UIview中两个子控件的位置
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];

}
-(void)oglFlip:(id)sender{
CATransition *transition = [CATransition animation];
transition.duration =2.0f;
transition.type =@"oglFlip";
transition.subtype =kCATransitionFromBottom;  //指定动画为上下翻转
[self.view.layer addAnimation:transition forKey:@"animation"];
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];

}
-(void)ripple:(id)sender{

CATransition *transition = [CATransition animation];
transition.duration =2.0f;
transition.type = @"rippleEffect";
[self.view.layer addAnimation:transition forKey:@"animation"];
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];

}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

动画效果如下所示：