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

最新推荐文章于 2025-11-11 10:12:00 发布

转载最新推荐文章于 2025-11-11 10:12:00 发布 · 672 阅读

IOS 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了使用UIView的animateWithDuration方法实现iOS应用中页面跳转的动画效果，包括从屏幕下部往上弹出图片和逐渐退回到屏幕底部的过程。通过设置视图的中心点坐标，实现了流畅的动画过渡。

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

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

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

[plain] view plain copy print ?

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

-(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 plain copy print ?

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

-(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 plain copy print ?

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

    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 plain copy print ?
1. [UIView animateWithDuration:1.0 animations:^{
2. firstView.alpha = 0.0;
3. secondView.alpha = 1.0;
4. }];
```
[UIView animateWithDuration:1.0 animations:^{
 firstView.alpha = 0.0;
 secondView.alpha = 1.0;
}];
```
- completion为动画执行完毕以后执行的代码块
- options为动画执行的选项。可以参考这里
- delay为动画开始执行前等待的时间