码迷，mamicode.com
首页 > 移动开发 > 详细

iOS动画效果和实现

时间：2016-06-17 09:43:06      阅读：284      评论：0      收藏：0      [点我收藏+]

标签：

动画效果提供了状态或页面转换时流畅的用户体验，在iOS系统中，咱们不需要自己编写绘制动画的代码，Core Animation提供了丰富的api来实现你需要的动画效果。

    UIKit只用UIView来展示动画,动画支持UIView下面的这些属性改变：

 

 

1、commitAnimations方式使用UIView动画

[cpp] view plain copy
 
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];  
  6.       
  7.     [button setTitle:@"改变" forState:UIControlStateNormal];  
  8.     button.frame = CGRectMake(10, 10, 60, 40);  
  9.     [button addTarget:self action:@selector(changeUIView) forControlEvents:UIControlEventTouchUpInside];  
  10.     [self.view addSubview:button];  
  11.       
  12. }  
  13.   
  14. - (void)changeUIView{  
  15.     [UIView beginAnimations:@"animation" context:nil];  
  16.     [UIView setAnimationDuration:1.0f];  
  17.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  18.     [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];  
  19.     [UIView commitAnimations];  
  20.  }  

下面是点击改变后的效果（两种）：
 
技术分享技术分享
动画的常量有一下四种
[cpp] view plain copy
 
  1. UIViewAnimationTransitionNone,  
  2. UIViewAnimationTransitionFlipFromLeft,  
  3. UIViewAnimationTransitionFlipFromRight,  
  4. UIViewAnimationTransitionCurlUp,  
  5. UIViewAnimationTransitionCurlDown,  

1.2 交换本视图控制器中2个view位置

 [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];

先添加两个view ,一个redview  一个yellowview

 

[cpp] view plain copy
 
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.     UIView *redView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
  5.     redView.backgroundColor = [UIColor redColor];  
  6.     [self.view addSubview:redView];  
  7.       
  8.     UIView *yellowView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
  9.     yellowView.backgroundColor = [UIColor yellowColor];  
  10.     [self.view addSubview:yellowView];  
  11.       
  12.     UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];  
  13.     [button setTitle:@"改变" forState:UIControlStateNormal];  
  14.     button.frame = CGRectMake(10, 10, 300, 40);  
  15.     [button addTarget:self action:@selector(changeUIView) forControlEvents:UIControlEventTouchUpInside];  
  16.     [self.view addSubview:button];  
  17.       
  18.     UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];  
  19.     [button1 setTitle:@"改变1" forState:UIControlStateNormal];  
  20.     button1.frame = CGRectMake(10, 60, 300, 40);  
  21.     [button1 addTarget:self action:@selector(changeUIView1) forControlEvents:UIControlEventTouchUpInside];  
  22.     [self.view addSubview:button1];  
  23.       
  24. }  

[cpp] view plain copy
 
  1. - (void)changeUIView1{  
  2.     [UIView beginAnimations:@"animation" context:nil];  
  3.     [UIView setAnimationDuration:1.0f];  
  4.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  5.     [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];  
  6.     //  交换本视图控制器中2个view位置  
  7.     [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];  
  8.     [UIView commitAnimations];  
  9. }  

 

技术分享
这样看起来就像两页一样了。

1.3 、   [UIView setAnimationDidStopSelector:@selector(animationFinish:)];

在commitAnimations消息之前，可以设置动画完成后的回调，设置方法是：

    [UIView setAnimationDidStopSelector:@selector(animationFinish:)];

 

2、使用：CATransition

[cpp] view plain copy
 
  1. - (void)changeUIView2{  
  2.     CATransition *transition = [CATransition animation];  
  3.     transition.duration = 2.0f;  
  4.       transition.type = kCATransitionPush;  
  5.     transition.subtype = kCATransitionFromTop;  
  6.     [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];  
  7.     [self.view.layer addAnimation:transition forKey:@"animation"];  
  8. }  
transition.type 的类型可以有

淡化、推挤、揭开、覆盖

NSString * const kCATransitionFade;

NSString * const kCATransitionMoveIn;

NSString * const kCATransitionPush;

NSString * const kCATransitionReveal;

这四种，
transition.subtype 
也有四种

NSString * const kCATransitionFromRight;

NSString * const kCATransitionFromLeft;

NSString * const kCATransitionFromTop;

NSString * const kCATransitionFromBottom;


技术分享技术分享
 

2.2 私有的类型的动画类型：

立方体、吸收、翻转、波纹、翻页、反翻页、镜头开、镜头关

[cpp] view plain copy
 
  1. animation.type = @"cube"  
  2. animation.type = @"suckEffect";    
  3. animation.type = @"oglFlip";//不管subType is "fromLeft" or "fromRight",official只有一种效果  
  4. animation.type = @"rippleEffect";   
  5. animation.type = @"pageCurl";   
  6. animation.type = @"pageUnCurl"  
  7. animation.type = @"cameraIrisHollowOpen ";  
  8. animation.type = @"cameraIrisHollowClose ";  
下图是第一个cube立方体的效果：
技术分享

2.3 CATransition的 startProgress  endProgress属性

这两个属性是float类型的。
可以控制动画进行的过程，可以让动画停留在某个动画点上，值在0.0到1.0之间。endProgress要大于等于startProgress。
比如上面的立方体转到，可以设置endProgress= 0.5，让动画停留在转动一般的位置。
上面这些私有的动画效果，在实际应用中要谨慎使用。因为在app store审核时可能会以为这些动画效果而拒绝通过。
 
 

3、UIView的 + (void)animateWithDuration

:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
方法。
这个方法是在iOS4.0之后才支持的。
比 1 里的UIView的方法简洁方便使用。
DidView里添加moveView。
[cpp] view plain copy
 
  1. moveView = [[UIView alloc] initWithFrame:CGRectMake(10, 180, 200, 40)];  
  2. moveView.backgroundColor = [UIColor blackColor];  
  3. [self.view addSubview:moveView];  

 

[cpp] view plain copy
 
  1. - (void)changeUIView3{  
  2.     [UIView animateWithDuration:3 animations:^(void){  
  3.         moveView.frame = CGRectMake(10, 270, 200, 40);  
  4.     }completion:^(BOOL finished){  
  5.         UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 40, 40)];  
  6.         label.backgroundColor = [UIColor blackColor];  
  7.         [self.view addSubview:label];  
  8.     }];  
  9. }  
然后用UIView animateWithDuration动画移动，移动动画完毕后添加一个Label。

 

3.2、 animateWithDuration的嵌套使用

[cpp] view plain copy
 
  1. - (void)changeUIView3{  
  2.    
  3.       
  4.     [UIView animateWithDuration:2  
  5.                           delay:0  
  6.                         options:UIViewAnimationOptionCurveEaseOut animations:^(void){  
  7.         moveView.alpha = 0.0;  
  8.     }completion:^(BOOL finished){  
  9.         [UIView animateWithDuration:1  
  10.                               delay:1.0  
  11.                             options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat  
  12.                          animations:^(void){  
  13.                              [UIView setAnimationRepeatCount:2.5];  
  14.                              moveView.alpha = 1.0;  
  15.                          }completion:^(BOOL finished){  
  16.                                
  17.                          }];  
  18.           
  19.     }];  
  20. }  
这个嵌套的效果是先把view变成透明，在从透明变成不透明，重复2.5次透明到不透明的效果。
文中例子的代码：AnimateDemo

iOS动画效果和实现

标签：

原文地址：http://www.cnblogs.com/piaojin/p/5592930.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！