您的位置:首页 > 产品设计 > UI/UE

CATransition的动画效果类型及实现方法

2012-05-31 11:20 597 查看
实现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 {  

   

}  

curled = !curled;
 


// 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 {  

   

}  

curled = !curled;
 



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息