CATransition基本内容预览
CATransition类为layer实现了过渡动画，我们可以从一系列预定义的过渡动画中指定过渡效果或者提供自定义的CIFilter实例。
Creating a Transition Animation
CATransition类为Core Animation提供了过渡动画功能，它继承于CAAnimation，并且对整个layer产生影响而不是layer中具体的属性。可以使用继承的方法animation创建CATransition实例，并且拥有默认的过渡动画效果，如下表：
Table 1 Default CATransition property values
Transition Property
Value
type
Uses a fade transition. The value is kCATransitionFade.
subType
Not applicable.
duration
Uses the duration of the current transaction or 0.25 seconds if the duration has not been set for a transaction. The value is 0.0
timingFunction
Uses linear pacing. The value is nil.
startProgress
0.0
endProgress
1.0
Configuring a Transition
一旦创建CATransition对象，我们可以配置预先定义的动画效果，在OS X上可以使用 Core Image filter创建自定义过渡。预先定义的过渡动画类型如下，通过设置type属性：
| Transition Type | Description |
|---|---|
| The layer fades as it becomes visible or hidden. | |
| The layer slides into place over any existing content. | |
| The layer pushes any existing content as it slides into place | |
|
The layer is gradually revealed in the direction specified by the transition subtype. |
除了kCATransitionFade，其他的动画类型支持使用subtype属性指定过渡动画的方向，如下表：
| Transition Subtype Constant | Description |
|---|---|
| The transition begins at the right side of the layer. | |
| The transition begins at the left side of the layer. | |
| The transition begins at the top of the layer. | |
|
| The transition begins at the bottom of the layer. |
CATransition通常用于通过CALayer控制UIView内子控件的过渡动画,比如,删除子控件,添加子控件,切换两个子控件等.具体使用步骤总结:
1：创建CATransition对象.
2：为CATransition设置type和subtype两个属性,其中 type 指定动画的类型,subtype指定动画移动的方向.
3：如果不需要动画执行的整个过程(就是只要动画执行到中间部分就停止),可以指定startProgress(动画开始的进度),endProgress(动画结束的进度)属性.
4：调用 UIView的 layer属性的-(void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key即可进行动画.第一个参数为CAAnimation对象，第二个参数为用于该动画对象执行的唯一标识。
UIView相关的过渡方法
1)调用UIView的+(void)beginAnimations:(NSString *)animationID context:(void *)context开始动画
2)调用UIView的+(void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache设置动画类型.并且调用+ (void)setAnimationCurve:(UIViewAnimationCurve)curve设置变化曲线.以及调用其他方法设置相关属性,根据具体操作.如:时间的设置
3)调用UIView+ (void)commitAnimations提交动画.
二：基本属性功能介绍
//CATransition继承了CAAnimation，因此也支持制定CAAnimation的removedOnCompletion等属性。
//该属性用于指定一个CAMediaTimingFunction对象，该对象负责控制动画变化的步长。
@property(strong) CAMediaTimingFunction *timingFunction;
//该属性用于指定改动画完成时是否从目标CALayer上删除该动画。
@property(getter=isRemovedOnCompletion)BOOL removedOnCompletion;
//CAAnimation代理方法
//动画开始的时候将会回调该方法，可以根据需求重写改方法执行自定义处理。
- (void)animationDidStart:(CAAnimation *)anim;
//动画结束的时候将会回调该方法。
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
/* Common transition types.用于控制动画的类型 */
//通过渐影效果控制子组件的过渡。这是默认的属性值
CA_EXTERN NSString *const kCATransitionFade
//通过移入动画控制子组件的过渡。
CA_EXTERN NSString *const kCATransitionMoveIn
//通过推入动画控制子组件的过渡
CA_EXTERN NSString *const kCATransitionPush
//通过揭开动画控制子组件的过渡。
CA_EXTERN NSString *const kCATransitionReveal
/* Common transition subtypes.用于控制动画方向 */
//指定动画方向，从右到左
CA_EXTERN NSString *const kCATransitionFromRight
//指定动画方向，从左向右
CA_EXTERN NSString *const kCATransitionFromLeft
//指定动画方向，从上到下
CA_EXTERN NSString *const kCATransitionFromTop
//指定动画方向，从下到上
CA_EXTERN NSString *const kCATransitionFromBottom
//UIView的过渡动画方式
typedefNS_ENUM(NSInteger, UIViewAnimationTransition) {
UIViewAnimationTransitionNone,//不使用动画
UIViewAnimationTransitionFlipFromLeft,//从左边滑入的动画方式
UIViewAnimationTransitionFlipFromRight,//从右边滑出的动画方式
UIViewAnimationTransitionCurlUp,//指定翻开书页的动画方式
UIViewAnimationTransitionCurlDown,//指定放下书页的动画方式
};
//动画变化速度方式
typedefNS_ENUM(NSInteger, UIViewAnimationCurve) {
UIViewAnimationCurveEaseInOut, // slow at beginning and end动画先比较缓慢，然后逐渐加快
UIViewAnimationCurveEaseIn, // slow at beginning动画逐渐变慢
UIViewAnimationCurveEaseOut, // slow at end动画逐渐加快
UIViewAnimationCurveLinear //匀速动画
};
三：代码demo展示（实现了多种过渡动画效果）
#import <QuartzCore/QuartzCore.h>
#import "FKViewController.h"
@implementation FKViewController
- (void)viewDidLoad
{
[superviewDidLoad];
UIView *magentaView = [[UIViewalloc]initWithFrame:self.view.bounds];
magentaView.backgroundColor = [UIColor magentaColor];
[self.viewaddSubview:magentaView];
UIView* grayView = [[UIViewalloc]initWithFrame:self.view.bounds];
grayView.backgroundColor = [UIColor lightGrayColor];
[self.viewaddSubview: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 *bn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[bn setTitle:[bnTitleArrayobjectAtIndex:i] forState:UIControlStateNormal];
NSInteger row = i /4;
NSInteger col = i %4;
bn.frame =CGRectMake(5 + col *80, totalHeight - (2 - row) *45 -20 ,70 ,35);
[self.viewaddSubview:bn];
[bnArrayaddObject:bn];
}
//为8个按钮分别绑定不同的事件处理方法
[[bnArrayobjectAtIndex:0]addTarget:self action:@selector(add:) forControlEvents:UIControlEventTouchUpInside];
[[bnArrayobjectAtIndex:1]addTarget:self action:@selector(curl:) forControlEvents:UIControlEventTouchUpInside];
[[bnArrayobjectAtIndex:2]addTarget:self action:@selector(move:) forControlEvents:UIControlEventTouchUpInside];
[[bnArrayobjectAtIndex:3]addTarget:self action:@selector(reveal:) forControlEvents:UIControlEventTouchUpInside]; [[bnArray objectAtIndex:4]addTarget:self action:@selector(cube:) forControlEvents:UIControlEventTouchUpInside];
[[bnArrayobjectAtIndex:5]addTarget:self action:@selector(suck:) forControlEvents:UIControlEventTouchUpInside];
[[bnArray objectAtIndex:6]addTarget:self action:@selector(oglFlip:)forControlEvents:UIControlEventTouchUpInside];
[[bnArrayobjectAtIndex:7]addTarget:self action:@selector(ripple:)forControlEvents:UIControlEventTouchUpInside];
}
-(void) add:(id)sender
{
//开始执行动画
[UIView beginAnimations:@"animation" context:nil];
[UIView setAnimationDuration:1.0f];
//控制UIView内过渡动画的类型
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];
//设置动画的变化曲线
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
//提交动画
[UIView commitAnimations];
}
-(void) curl:(id)sender
{
//开始执行动画
[UIView beginAnimations:@"animation" context:nil];
[UIView setAnimationDuration:1.0f];
//控制UIView内过渡动画的类型
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.viewcache:YES];
//设置动画的变化曲线
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
//交换视图控制器所显示的UIView中中2个子控件位置
[self.view exchangeSubviewAtIndex:3 withSubviewAtIndex:2];
[UIView commitAnimations];
}
-(void) move:(id)sender
{
CATransition *transition = [CATransition animation];
transition.duration =2.0f;
//使用kCATransitionMoveIn动画
transition.type =kCATransitionMoveIn;
//指定动画方向，从左向右
transition.subtype =kCATransitionFromLeft;
[self.view.layer addAnimation:transitionforKey:@"animation"];
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];
}
-(void) reveal:(id)sender
{
CATransition *transition = [CATransition animation];
transition.duration =2.0f;
//使用kCATransitionReveal动画
transition.type =kCATransitionReveal;
//指定动画方向，从上到下
transition.subtype =kCATransitionFromTop;
[self.view.layer addAnimation:transitionforKey:@"animation"];
//交换视图控制器所显示的UIView中中2个子控件位置
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];
}
//下面是私有方法。
-(void) cube:(id)sender
{
CATransition *transition = [CATransition animation];
transition.duration =2.0f;
//使用@"cube"动画。通过立方体旋转动画控制子组件的过渡。
transition.type =@"cube";
//指定动画方向，从左到右
transition.subtype =kCATransitionFromLeft;
[self.view.layer addAnimation:transitionforKey:@"animation"];
//交换视图控制器所显示的UIView中中2个子控件位置
[self.viewexchangeSubviewAtIndex:2 withSubviewAtIndex:3];
}
-(void) suck:(id)sender
{
CATransition *transition = [CATransition animation];
transition.duration =2.0f;
//使用@"suck"动画,该动画与动画方向无关
transition.type =@"suckEffect";
[self.view.layer addAnimation:transitionforKey:@"animation"];
//交换视图控制器所显示的UIView中中2个子控件位置
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];
}
-(void) oglFlip:(id)sender
{
CATransition *transition = [CATransition animation];
transition.duration =2.0f;
//使用@"oglFlip"动画
transition.type =@"oglFlip";
//指定动画方向为上下翻转
transition.subtype =kCATransitionFromBottom;
[self.view.layer addAnimation:transitionforKey:@"animation"];
//交换视图控制器所显示的UIView中中2个子控件位置
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];
}
-(void) ripple:(id)sender
{
CATransition *transition = [CATransition animation];
transition.duration =2.0f;
//使用@"rippleEffect"动画，该动画与方向无关
transition.type =@"rippleEffect";
[self.view.layer addAnimation:transitionforKey:@"animation"];
//交换视图控制器所显示的UIView中中2个子控件位置
[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];
}
@end
扫一扫
24
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
