IOS开发笔记（6）UIView使用animateWithDuration控制页面效果



http://blog.csdn.net/xiaofansong/article/details/8282636

引言：最近学习了一些页面的跳转动画效果。使用的是UIview的animateWithDuration方法。当然之前的beginAnimations也是可以实现的。

比如一：从屏幕下部往上渐渐弹出一个图片

[plain] view plaincopyprint?

1. -(void) fadeIn  
2. {     
3.     CGRect rect = [[UIScreen mainScreen] bounds];  
4.       self.view.center = CGPointMake(rect.size.width/2, 720);  
5.     [UIView animateWithDuration:0.5f animations:^{  
6.          self.view.center = CGPointMake(rect.size.width/2, 240+10);    
7.     } completion:^(BOOL finished) {  
8.      //   [imageView setImageURL:[NSURL URLWithString:imgUrl]];  
9.     }];  
10. }  

-(void) fadeIn{       CGRect rect = [[UIScreen mainScreen] bounds];      self.view.center = CGPointMake(rect.size.width/2, 720);    [UIView animateWithDuration:0.5f animations:^{         self.view.center = CGPointMake(rect.size.width/2, 240+10);      } completion:^(BOOL finished) {     //   [imageView setImageURL:[NSURL URLWithString:imgUrl]];    }];}

比如二：再渐渐退回去

[plain] view plaincopyprint?

1. -(void) fadeOut  
2. {  
3.     CGRect rect = [[UIScreen mainScreen] bounds];  
4.     [UIView animateWithDuration:0.5f animations:^{  
5.         self.view.center = CGPointMake(rect.size.width/2, 720);  
6.     } completion:^(BOOL finished) {  
7.         [imageView cancelImageLoad];  
8.         [imageView release];  
9.         //[imgUrl release];  
10.        // imageView = nil;  
11.         //imgUrl = nil;  
12.        // [self.view removeFromSuperview];  
13.     }];  
14. }  

-(void) fadeOut{    CGRect rect = [[UIScreen mainScreen] bounds];    [UIView animateWithDuration:0.5f animations:^{        self.view.center = CGPointMake(rect.size.width/2, 720);    } completion:^(BOOL finished) {        [imageView cancelImageLoad];        [imageView release];        //[imgUrl release];       // imageView = nil;        //imgUrl = nil;       // [self.view removeFromSuperview];    }];}

如果使用beginAnimations就是下面这样的。。。。

[plain] view plaincopyprint?

1.    CGRect rect = [[UIScreen mainScreen] bounds];  
2.    self.myimg.center = CGPointMake(rect.size.width/2, 720);  
3.    [UIView beginAnimations:nil context:NULL];  
4. [UIView setAnimationDuration:1.0];  
5.   
6. self.myimg.center = CGPointMake(rect.size.width/2, 720);   
7.   
8. [UIView commitAnimations];  

    CGRect rect = [[UIScreen mainScreen] bounds];    self.myimg.center = CGPointMake(rect.size.width/2, 720);    [UIView beginAnimations:nil context:NULL];[UIView setAnimationDuration:1.0];self.myimg.center = CGPointMake(rect.size.width/2, 720); [UIView commitAnimations];

备注：其实掌握了  self.view.center = CGPointMake(rect.size.width/2, 240+10);

设置其中心点坐标即可。

下面是可以设置动画效果的属性：

frame

bounds

center

transform

alpha

backgroundColor

contentStretch

例如一个视图淡出屏幕，另外一个视图出现的代码：

[objc] view plaincopyprint?

1. <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">[</span>UIView animateWithDuration<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">:</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">1.0</span> animations<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">:^</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">{</span>  
2.         firstView.alpha <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">=</span> <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">0.0</span>;  
3.         secondView.alpha <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">=</span> <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">1.0</span>;  
4. <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">}</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">]</span>;  

<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">[</span>UIView animateWithDuration<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">:</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">1.0</span> animations<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">:^</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">{</span>        firstView.alpha <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">=</span> <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">0.0</span>;        secondView.alpha <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">=</span> <span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(36, 0, 217); vertical-align: baseline;">1.0</span>;<span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">}</span><span style="border-width: 0px; margin: 0px; padding: 0px; color: rgb(0, 34, 0); vertical-align: baseline;">]</span>;

• completion为动画执行完毕以后执行的代码块
• options为动画执行的选项。可以参考这里
• delay为动画开始执行前等待的时间