iOS九宫格放大图片相册

最近在做一个比较基础的功能,类似新浪微博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的图片,再以动画的形式缩小图片后移除,以达到偷天换日的效果。
如果有更好的实现方式,欢迎指教哈,谢谢。

你可能感兴趣的:(iOS九宫格放大图片相册)