一个页面切换效果的拙劣模仿
模仿的是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: 修改呗