微信朋友圈图片显示缩放

时间:2024-04-17 15:29:27

近期公司非要做一个和微信朋友圈效果,还要求要惟妙惟肖。感觉最麻烦的就是在图片缩放的部分,结果发现微信在朋友圈图片点击放大的地方是渐入的,可是再次点击的时候是闪出的,没有渐变背景效果,所以修复了一下,如今分享给大家。(仅仅是个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下载


  


(蓝色,能够删掉能够不删掉,是这个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已经上传。


git代码下载


点击demo下载