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



http://blog.youkuaiyun.com/xiaofansong/article/details/8282636



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


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

  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]];
    }];
}



 

比如二:再渐渐退回去

  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就是下面这样的。。。。

  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


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

    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为动画开始执行前等待的时间
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值