一个页面切换效果的拙劣模仿
模仿的是iBooks打开书本时的效果,即缩略图开始放大,然后变成了一本书的内容。包括weico里面打开一个微博的图片也有类似的效果。
但是我的模仿参照了github上面的某一串代码(我现在又搜不到了),进行了一些改进。但是和iBooks以及weico比起来,又少了一些东西,所以比较拙劣。
我的效果是这样的。
原理:
使用两个ViewController。其中DetailViewController当作modalViewController来弹出。并设置detailVC.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
这时,两个ViewController之间的切换就有渐变过渡了。
然后,detailViewController中设置一个property:originalRect,来保存tableViewController中,点到的cell.imageView.frame相对于顶级View的rect。
在detailViewController的viewWillAppear中,让detailViewController.imageView.frame从originalRect变换到全屏。
这样看上去就好像这个图片从tableViewCell里面飞出来变全屏一样。
但是仔细看和iBooks还是不一样。iBooks应该也是用了modalViewController,并且应该也用了UIModalTransitionStyleCrossDissolve。但是在Dissolve之前,tableViewCell中的image确实做了一点CoreAnimation的东西。但是如何计算我不太清楚。希望各位大神能够告诉我。
关键代码:
ViewController.m
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath]; UIImageView *imgView = cell.imageView; CGRect frame = imgView.frame; NSLog(@"original frame:%@",[NSValue valueWithCGRect:frame]); CGRect rectInParentView = [imgView convertRect:frame toView:self.view]; NSLog(@"rect in parent view:%@",[NSValue valueWithCGRect:rectInParentView]); DetailViewController *detailVC = [[DetailViewController alloc]init]; detailVC.originalRect = rectInParentView; detailVC.modalTransitionStyle = UIModalTransitionStyleCrossDissolve; [self presentModalViewController:detailVC animated:YES]; }
DetailViewController.m
- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor scrollViewTexturedBackgroundColor]; UIImageView *imgView = [[UIImageView alloc]initWithFrame:self.originalRect]; imgView.contentMode = UIViewContentModeScaleAspectFit; imgView.image = [UIImage imageNamed:@"flag.jpg"]; imgView.userInteractionEnabled = YES; UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImage:)]; [imgView addGestureRecognizer:tapGesture]; [self.view addSubview:imgView]; self.imageView = imgView; } - (void)viewWillAppear:(BOOL)animated { [UIView animateWithDuration:0.4 delay:0.1 options:0 animations:^{ self.imageView.frame = self.view.bounds; } completion:nil]; } - (void)tapImage:(id)sender { NSLog(@"tap image"); [UIView animateWithDuration:0.4 animations:^{ self.imageView.frame = self.originalRect; }]; [self performSelector:@selector(dismissModalViewControllerAnimated:) withObject:[NSNumber numberWithBool:YES] afterDelay:0.2]; }
完整代码点此
本著作係採用創用 CC 姓名標示 2.0 通用版 授權條款授權.
2012年11月13日 09:48
话说你文字排版怎么这样乱?
2012年12月08日 21:02
@bachue: align有问题的样子
2012年12月09日 20:19
@hikui: 修改呗