最近在做一个比较基础的功能,类似新浪微博tableViewCell的九宫格图片点击放大效果,并左右滑动相册,在这里将自己的想法分享给大家
719B18F97C54009F08445261B48614B3.png
如图所示这时候我们点击cell上的图片,就会有图片放大效果然后显示出相册
967C89DCFF5EB34702B24E1134FDC2F9.png
这个动画的实现效果其实是可以套用在很多方面的
首先我们监听点击cell上的位置对应到控制器的视图上
然后再对应的位置上创建出一个一模一样的imageView出来
// 在view上创建一个一样的图片
UIImageView *new_imageView = [[UIImageView alloc] init];
CGRect new_rect = [item convertRect:imgView.frame toView:[UIApplication sharedApplication].keyWindow];
_imageView = new_imageView;
new_imageView.image = imgView.image;
new_imageView.frame = new_rect;
在创建后就可以走动画效果了,将图片的frame放大后,在视图上面直接盖上一个collectionView(相册)
[UIView animateWithDuration:0.3 animations:^{
maskView.alpha = 1.0f;
new_imageView.frame = [MXUtils calculationImageSize:new_imageView.image];
} completion:^(BOOL finished) {
// 添加collectionView
[self addCollectionView:imgArray index:index collectionView:collectionView indexPathArray:indexPathArray];
}];
至于相册collectionView相信大家都会做的,这里就不介绍啦,而在点击图片的时候,相片需要缩回去,这也是同样的道理
self.tableView.scrollEnabled = NO;
// 取出图片
UIImageView *imgView = imageArray[_index];
CGRect new_rect = [item convertRect:imgView.frame toView:[UIApplication sharedApplication].keyWindow];
[UIView animateWithDuration:0.3 animations:^{
self.maskView.alpha = 0.0f;
self.imageView.frame = new_rect;
} completion:^(BOOL finished) {
self.tableView.scrollEnabled = YES;
[self.maskView removeFromSuperview];
[self.imageView removeFromSuperview];
self.maskView = nil;
self.imageView = nil;
}];
我们直接先移除掉collectionView,然后改变之前放大的imageView的图片,再以动画的形式缩小图片后移除,以达到偷天换日的效果。
如果有更好的实现方式,欢迎指教哈,谢谢。