iOS类微信朋友圈图片放大效果,点击图片放大动画

腾讯云服务器 双11 优惠
https://cloud.tencent.com/act/double11/reserve?spread_hash_key=Pel1qM

change.gif
要用到的 就是坐标转换方法
- (CGRect)convertRect:(CGRect)rect toView:(**UIView** *)view; 

#1:我这里演示的是 tableviewHeader上子view 里的一张图片,将其添加到新的view上,并且 由此图片相对于 手机坐标系的点开始放大(类似于微信朋友圈图片的点击放大)。
#因为是在项目中使用的, 所以只贴出部分代码, 如有需要可联系,Android的 随后更新

(1):获取所需要放大的 图片frame  在 目标视图 _headerView中的 react
CGRect rectInCell = [_headerViewconvertRect:_headerView.headerBgView.frametoView:_headerView];
(2):获取上一步得到的  react 在 tableview 中的 react
CGRect rectInTableView = [_headerViewconvertRect:rectInCelltoView:self.tv];
(3):同上,这样就一步一步的将 所需放大的 图片的 frame 转换到了 相对于屏幕的 位置       
CGRect original = [self.tvconvertRect:rectInTableViewtoView:self.view];

#上边三行代码可以用一行来解决 

#将_headerView.headerBgView.frame从_headerView转换到当前self.view中,并返回self.view中的位置
CGRect re2 = [self.viewconvertRect:_headerView.headerBgView.framefromView:_headerView];

#放大过程的思路,用一个容器来承载你所需放大的图片( [..  addsubview] ),然后 [uiview animate…]动画,将图片移动到你所需的位置即可,具体情况根据你的需求来定,此时tableview 上的图片就被你 add到了新的view上边,然后就是点击缩小。

#缩小过程思路
#将第三步计算出的 react 保留下, 因为缩小图片要按照原轨迹返回,点击事件触发 [uiview animate…]动画,将图片缩小到目标大小 (第三步计算结果original),然后动画结束的时候, tableview 的headerview 重新 addsubview 放大的图片。



#swift 代码 
  func spreadAction() {
        if Int(mapView.height) == Int(200 * SCALE_W) {
            let rect = self.convertRect(mapView.frame, toView: self.window)
            originalFrame = rect
            mapView.frame = CGRectMake(originalFrame.origin.x, originalFrame.origin.y, originalFrame.width, originalFrame.height)
            self.window?.addSubview(mapView)
            
            #这里动画 换成 uiview.animate{} 就行
            let popAnimation = POPSpringAnimation(propertyNamed: kPOPViewFrame)
            popAnimation.toValue = NSValue(CGRect: (self.window?.frame)!)
            popAnimation.springBounciness = 12.0
            popAnimation.springSpeed = 8.0
            mapView.pop_addAnimation(popAnimation, forKey: "")
            popAnimation.completionBlock = {[weak self] anim, finished in
                if finished {
                    self?.spreadBtn.setImage(UIImage(named: "btn_map3"), forState: .Normal)
                    self?.mapView.pop_removeAllAnimations()
                }
            }
        } else {
            UIView.animateWithDuration(0.2, animations: {
                self.mapView.frame = self.originalFrame
                }, completion: { (done) in
                    self.mapView.frame = self.contentView.frame
                    self.contentView.addSubview(self.mapView)
                    self.spreadBtn.setImage(UIImage(named: "btn_map2"), forState: .Normal)
            })
        }
    }


#OC 代码

#import "CompanyMapCell.h"
#import 
#import 
#import "CompanyDetailModel.h"
#import "CompanyBaseViewController.h"
@interface CompanyMapCell () {
    MKMapView *_mapView;
    CompanyDetailModel *_model;
    CGRect _original;
    UIView *_bgView;
    UIButton *_locationBtn;
    UIButton *_spreadOutBtn;
    CLLocationCoordinate2D _currentCoordinate;
}


@end

@implementation CompanyMapCell


- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

    }
    return self;
}

- (void)makeCellWithDic:(CompanyDetailModel *)model {
    self.mapView.frame=CGRectMake(0, 0, FULLSCREEN.width, 200*X_SCALE);
    [self.contentView addSubview:self.mapView];
    
    
    _bgView = [[UIView alloc] init];
    _bgView.frame = CGRectMake(0, 200*X_SCALE - 50*X_SCALE, FULLSCREEN.width, 50*X_SCALE);
    _bgView.backgroundColor = [UIColor clearColor];
    [_mapView addSubview:_bgView];
    
    _spreadOutBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    _spreadOutBtn.frame = CGRectMake(FULLSCREEN.width - 50*X_SCALE, 0, 40*X_SCALE, 40*X_SCALE);
    [_spreadOutBtn addTarget:self action:@selector(changeSize) forControlEvents:UIControlEventTouchUpInside];
    [_spreadOutBtn setImage:[UIImage imageNamed:@"btn_map2"] forState:UIControlStateNormal];
    [_bgView addSubview:_spreadOutBtn];
    
    
    _locationBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    _locationBtn.frame = CGRectMake(10*X_SCALE, 0, 40*X_SCALE, 40*X_SCALE);
    [_locationBtn addTarget:self action:@selector(recurLocation) forControlEvents:UIControlEventTouchUpInside];
    [_locationBtn setImage:[UIImage imageNamed:@"btn_map1"] forState:UIControlStateNormal];
    [_bgView addSubview:_locationBtn];
    
    
    _model = model;
    [self getLocationWithCity:[NSString stringWithFormat:@"%@%@%@",model.provinceName,model.cityName,model.locations]];
    UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPress:)];
    [_mapView addGestureRecognizer:longPress];
}

#pragma mark ----- 按钮重定位  以及  改变地图大小
- (void)recurLocation {
    [self setMapCenter];
}

- (void)changeSize {
    [self changeMapViewSize];
}


#pragma mark -----根据位置获取经纬度
- (void)getLocationWithCity:(NSString *)str {
    NSString *oreillyAddress = str;
    CLGeocoder *myGeocoder = [[CLGeocoder alloc] init];
    [myGeocoder geocodeAddressString:oreillyAddress completionHandler:^(NSArray *placemarks, NSError *error) {
        if ([placemarks count] > 0 && error == nil) {
            CLPlacemark *firstPlacemark = [placemarks objectAtIndex:0];
            _currentCoordinate.latitude = firstPlacemark.location.coordinate.latitude;
            _currentCoordinate.longitude = firstPlacemark.location.coordinate.longitude;
            [self addPointOnMap];
        }
    }];
}

#pragma mark  -------添加大头针  设置缩放比例
- (void)addPointOnMap{
    MKPointAnnotation *ann = [[MKPointAnnotation alloc] init];
    ann.coordinate = _currentCoordinate;
    [ann setTitle:_model.companyName];
    [ann setSubtitle:_model.companyPhone];
    [_mapView addAnnotation:ann];
    //设置显示范围
    [self setMapCenter];
}

- (void)setMapCenter {
    MKCoordinateRegion region;
    region.span.latitudeDelta = 0.01;
    region.span.longitudeDelta = 0.01;
    region.center = _currentCoordinate;
    // 设置显示位置(动画)
    [_mapView setRegion:region animated:NO];
    // 设置地图显示的类型及根据范围进行显示
    [_mapView regionThatFits:region];
}

#pragma mark -------长按放大 与 缩小
- (void)longPress:(UILongPressGestureRecognizer *)longPress {
    if (longPress.state == UIGestureRecognizerStateEnded) {
        [self changeMapViewSize];
    }
}

- (void)changeMapViewSize {
    if (_mapView.height == 200 *X_SCALE) {
        CompanyBaseViewController *company = (CompanyBaseViewController*)self.viewcontroller;
        UITableView* tableView = company.tv;
        UIWindow* window = [UIApplication sharedApplication].keyWindow;
        CGRect rectInCell = [self.contentView convertRect:_mapView.frame toView:self];
        CGRect rectInTableView = [self convertRect:rectInCell toView:tableView];
        _original = [tableView convertRect:rectInTableView toView:window];
        _original = CGRectMake(_original.origin.x + (_original.size.width - _mapView.width) / 2.f,
                               _original.origin.y + (_original.size.height - _mapView.height) / 2.f,
                               _mapView.width, _mapView.height);
        _mapView.frame = _original;
        window.backgroundColor = [UIColor clearColor];
        [window addSubview:_mapView];
        [UIView animateWithDuration:0.3 animations:^{
            _mapView.frame = self.window.frame;
            _bgView.frame = CGRectMake(0, _mapView.height - 50*X_SCALE, FULLSCREEN.width, 40*X_SCALE);
        } completion:^(BOOL finished) {
            [_spreadOutBtn setImage:[UIImage imageNamed:@"btn_map3"] forState:UIControlStateNormal];
        }];
    } else {
        [UIView animateWithDuration:0.3 animations:^{
            _mapView.frame = _original;
            _bgView.frame = CGRectMake(0, _mapView.height - 50*X_SCALE, FULLSCREEN.width, 40*X_SCALE);
        } completion:^(BOOL finished) {
            [_mapView removeFromSuperview];
            _mapView.frame = CGRectMake(0, 0, FULLSCREEN.width, 200*X_SCALE);
            [_spreadOutBtn setImage:[UIImage imageNamed:@"btn_map2"] forState:UIControlStateNormal];
            [self.contentView addSubview:_mapView];
        }];
    }

}

+ (CGFloat)heightOfCareCompanyViewWithData:(CompanyDetailModel *)model {
    return 200*X_SCALE;
}


@end

你可能感兴趣的:(iOS类微信朋友圈图片放大效果,点击图片放大动画)