Core Animation学习笔记四：CATranstion
CATranstion：提供了影响整个层内容过渡的效果，在动画期间它使层产生fade(渐变)，push(推拉)以及reveals(揭示)的动画效果。这些过渡的效果可以通过你自己自定义的core image filters来扩展。
引用：http://hi.baidu.com/vbkan/blog/item/8b3314ca1b1da85ef31fe7d4.html
http://blog.sina.com.cn/s/blog_74d748180100qi8e.html
实现iphone漂亮的动画效果主要有两种方法，一种是UIView层面的，一种是使用CATransition进行更低层次的控制，
第一种是UIView，UIView方式可能在低层也是使用CATransition进行了封装，它只能用于一些简单的、常用的效果展现，这里写一个常用的示例代码，供大家参考。
[UIView beginAnimations:@"Curl"context:nil];//动画开始 [UIView setAnimationDuration:0.75]; [UIView setAnimationDelegate:self]; [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:myview cache:YES]; [myview removeFromSuperview]; [UIView commitAnimations]; |
第二种方式相对复杂一些，但如果更好的进行控制，还是使用这种方法吧，基本使用方法可以看一下如下例子：
| CATransition *animation = [CATransition animation]; [animation setDuration:1.25f]; [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [animation setType:kCATransitionReveal]; [animation setSubtype: kCATransitionFromBottom]; [self.view.layer addAnimation:animation forKey:@"Reveal"]; |
这里使用了setType与setSubtype组合，这使用个比较保险，因为他的参数就是官方API里定义的，他们的参数说明可以参考如下（默认类型是淡入淡出类型。）：
setType:可以返回四种类型： kCATransitionFade 淡出 kCATransitionMoveIn 覆盖原图 kCATransitionPush 推出 kCATransitionReveal底部显出来 setSubtype:也可以有四种类型： kCATransitionFromRight； kCATransitionFromLeft(默认值) kCATransitionFromTop； kCATransitionFromBottom |
还有一种设置动画类型的方法，不用setSubtype，只用setType
| [animation setType:@"suckEffect"]; |
这里的suckEffect就是效果名称，可以用的效果主要有：
| pageCurl 向上翻一页 pageUnCurl 向下翻一页 rippleEffect 滴水效果 suckEffect 收缩效果，如一块布被抽走 cube 立方体效果 oglFlip 上下翻转效果 |
最后再给出一种常用代码供大家参考。
示例代码一：
// Curl the image up or down
CATransition *animation = [CATransition animation];
[animation setDuration:0.35];
[animation setTimingFunction:UIViewAnimationCurveEaseInOut];
if (!curled){
//animation.type = @"mapCurl";
animation.type = @"pageCurl";
animation.fillMode = kCAFillModeForwards;
animation.endProgress = 0.99;
} else {
//animation.type = @"mapUnCurl";
animation.type = @"pageUnCurl";
animation.fillMode = kCAFillModeBackwards;
animation.startProgress = 0.01;
}
[animation setRemovedOnCompletion:NO];
[view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
[view addAnimation:animation forKey"pageCurlAnimation"];
// Disable user interaction where necessary
if (!curled) {
} else {
}
urled = !curled;
示例代码二：
头部导入： #import <QuartzCore/QuartzCore.h>
- (void) startAction:(id) sender{
// 定义动画
CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration =1.0f;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
//可根据需要，设置type和subtype属性产生不同的动画效果
//animation.type = kCATransitionPush;
//animation.type = kCATransitionMoveIn;
//animation.type = kCATransitionReveal;
//animation.type = kCATransitionFade;
//animation.subtype = kCATransitionPush;
//animation.subtype = kCATransitionMoveIn;
//animation.subtype = kCATransitionReveal;
//animation.subtype = kCATransitionFade;
switch ([(UISegmentedControl *)self.navigationItem.titleView selectedSegmentIndex]) {
case 0:
animation.type = @"rippleEffect";
//animation.type = @"cube"; //立方体翻转
//animation.type = @"oglFlip"; //层翻转
//animation.type = @"cameraIrisHollowClose";
//animation.type = @"cameraIrisHollowOpen";
break;
case 1:
animation.type = @"pageCurl";
break;
case 2:
animation.type = @"pageUnCurl";
break;
case 3:
animation.type = @"suckEffect";
break;
default:
break;
}
switch (direction) { //方向
case 0:
animation.subtype = kCATransitionFromRight;
break;
case 1:
animation.subtype = kCATransitionFromTop;
break;
case 2:
animation.subtype = kCATransitionFromLeft;
break;
case 3:
animation.subtype = kCATransitionFromBottom;
break;
default:
break;
}
//执行动画
UIView *bgView = [self.view viewWithTag:150];
NSInteger front = [[bgView subviews] indexOfObject:[bgView viewWithTag:151]];
NSInteger back = [[bgView subviews] indexOfObject:[bgView viewWithTag:152]];
if (someThing) {
[bgView exchangeSubviewAtIndex:front withSubviewAtIndex:back]; //图形变换
}else {
[bgView exchangeSubviewAtIndex:back withSubviewAtIndex:front];
}
[[bgView layer] addAnimation:animation forKey:@"animation"]; //bgView层执行动画
//[[self.view layer] addAnimation:animation forKey:@"animation"]; //self.view层执行动画
}
