近期公司非要做一个和微信朋友圈效果，还要求要惟妙惟肖。感觉最麻烦的就是在图片缩放的部分，结果发现微信在朋友圈图片点击放大的地方是渐入的，可是再次点击的时候是闪出的，没有渐变背景效果，所以修复了一下，如今分享给大家。（仅仅是个demo）详细应用到程序中，还须要大家依据自己的需求进行改进。
先说先原理在贴代码。
小伙伴我们既然要是模仿人家效果，首先是要观察。
1.打开微信朋友圈，点击有图片的它是渐变背景同一时候缩放。
2.再次点击放大后的图片，图片会缩小返回到所在列表的位置，让视觉上感觉是从列表里出来，之后又回到列表中。
看完以上两点，有的小伙伴就会想这会不会是一张图片？先不回答，接着往下看。
3.把wifi关掉，再次点击图片（这张图片，你没有点击过，而且已经在列表中显示出来了），你会发现事实上他们不是一张图片（上述问题不存在）。
4.高速刷列表（上拉载入很多其它）（关闭wifi情况下），你会发现列表中的图片等待载入图片是一张灰色的图片，这时候你点击这张灰色图片，是没有反映的，说明微信开发处理是：仅仅有图片载入完毕，才同意你点击。
5.打开wifi，单击一张图片放大（举个列子，是长方形320*160的图片），假设图片是寛320 高 160，假设你放大图片，这个放大的倍数怎么算，事实上非常easy，要么你先看微信朋友圈，看看我的推測有没有错：
推測：当屏幕是竖着，你看看这个图片最后到达边缘是哪个边，是寛？还是高？上述样例中320已经到边缘了，那么高就是最后到达边缘的，对吧。肯定对，那160变成480的高度（3.5寸的屏幕），当然这个缩放是同比的。480/图片的高度160 的出来3就是缩放的倍数。
6.如今拿出来微信找一张类似于寛是320*160的寛图，用两个手指缩放看看，你会发现，当达到我上传的推測后，不会继续放大。
7.微信图片单击后，多张能够左右滑动，单击缩小都会回到自己所在的位置。
8.还有，小图片有被缩减，这个缩减是有规律的：是把imgView.contentMode = UIViewContentModeScaleAspectFill;和第二5条心照不宣啊！，而且每一张图片都能缩放。
9.还有长按功能，这个假设上述8点实现，这个好说，对吧。
我来说说我这个demo实现的原理。先看看效果图片。
（蓝色，能够删掉能够不删掉，是这个demo实现的过程）
1.首先要自己定义个继承UIScrollView 的自己定义ImgScrollView.h，用来缩放单张图片，然后把这个控件在放到UIScrollView中。
2.图片单击的时候出现渐变效果，事实上就是背景透明层的控制，这个不说，然后把Cell中图片位置进行坐标转换成相对当前屏幕的位置。
3.初始化一个UIScrollview，用来存放ImgScrollView，背景是透明色。
4.计算单击图片位置，将容器ScrollView的ContentOffset.x位置相应设置。
5.缩放图片，推断图片的长和寛哪一边先到边缘，一旦有一边达到边缘，停止缩放。
6.给图片加入单击事件，同一时候imgView.contentMode = UIViewContentModeScaleAspectFill。
TapImageView.h有单击事件的图片
#import <UIKit/UIKit.h> @protocol TapImageViewDelegate <NSObject> - (void) tappedWithObject:(id) sender; @end @interface TapImageView : UIImageView @property (nonatomic, strong) id identifier; @property (weak) id<TapImageViewDelegate> t_delegate; @end
TapImageView.m
#import "TapImageView.h"
@implementation TapImageView
- (void)dealloc
{
_t_delegate = nil;
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(Tapped:)];
[self addGestureRecognizer:tap];
self.clipsToBounds = YES;
self.contentMode = UIViewContentModeScaleAspectFill;
self.userInteractionEnabled = YES;
}
return self;
}
- (void) Tapped:(UIGestureRecognizer *) gesture
{
if ([self.t_delegate respondsToSelector:@selector(tappedWithObject:)])
{
[self.t_delegate tappedWithObject:self];
}
}
@end
ImgScrollView.h能够缩放的图片
#import <UIKit/UIKit.h> @protocol ImgScrollViewDelegate <NSObject> - (void) tapImageViewTappedWithObject:(id) sender; @end @interface ImgScrollView : UIScrollView @property (weak) id<ImgScrollViewDelegate> i_delegate; - (void) setContentWithFrame:(CGRect) rect; - (void) setImage:(UIImage *) image; - (void) setAnimationRect; - (void) rechangeInitRdct; @end
ImgScrollView.m
#import "ImgScrollView.h"
@interface ImgScrollView()<UIScrollViewDelegate>
{
UIImageView *imgView;
//记录自己的位置
CGRect scaleOriginRect;
//图片的大小
CGSize imgSize;
//缩放前大小
CGRect initRect;
}
@end
@implementation ImgScrollView
- (void)dealloc
{
_i_delegate = nil;
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
self.bouncesZoom = YES;
self.backgroundColor = [UIColor clearColor];
self.delegate = self;
self.minimumZoomScale = 1.0;
imgView = [[UIImageView alloc] init];
imgView.clipsToBounds = YES;
imgView.contentMode = UIViewContentModeScaleAspectFill;
[self addSubview:imgView];
}
return self;
}
- (void) setContentWithFrame:(CGRect) rect
{
imgView.frame = rect;
initRect = rect;
}
- (void) setAnimationRect
{
imgView.frame = scaleOriginRect;
}
- (void) rechangeInitRdct
{
self.zoomScale = 1.0;
imgView.frame = initRect;
}
- (void) setImage:(UIImage *) image
{
if (image)
{
imgView.image = image;
imgSize = image.size;
//推断首先缩放的值
float scaleX = self.frame.size.width/imgSize.width;
float scaleY = self.frame.size.height/imgSize.height;
//倍数小的，先到边缘
if (scaleX > scaleY)
{
//Y方向先到边缘
float imgViewWidth = imgSize.width*scaleY;
self.maximumZoomScale = self.frame.size.width/imgViewWidth;
scaleOriginRect = (CGRect){self.frame.size.width/2-imgViewWidth/2,0,imgViewWidth,self.frame.size.height};
}
else
{
//X先到边缘
float imgViewHeight = imgSize.height*scaleX;
self.maximumZoomScale = self.frame.size.height/imgViewHeight;
scaleOriginRect = (CGRect){0,self.frame.size.height/2-imgViewHeight/2,self.frame.size.width,imgViewHeight};
}
}
}
#pragma mark -
#pragma mark - scroll delegate
- (UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return imgView;
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
CGSize boundsSize = scrollView.bounds.size;
CGRect imgFrame = imgView.frame;
CGSize contentSize = scrollView.contentSize;
CGPoint centerPoint = CGPointMake(contentSize.width/2, contentSize.height/2);
// center horizontally
if (imgFrame.size.width <= boundsSize.width)
{
centerPoint.x = boundsSize.width/2;
}
// center vertically
if (imgFrame.size.height <= boundsSize.height)
{
centerPoint.y = boundsSize.height/2;
}
imgView.center = centerPoint;
}
#pragma mark -
#pragma mark - touch
- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
if ([self.i_delegate respondsToSelector:@selector(tapImageViewTappedWithObject:)])
{
[self.i_delegate tapImageViewTappedWithObject:self];
}
}
这里不是所有代码，详细demo已经上传。