本文转载自《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
动画效果如下所示: