美文网首页iOSiOS-UI精品源码
iOS类微信朋友圈图片放大效果,点击图片放大动画

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

作者: Eric__li | 来源:发表于2016-07-05 19:25 被阅读3483次
    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 <CoreLocation/CoreLocation.h>
    #import <MapKit/MapKit.h>
    #import "CompanyDetailModel.h"
    #import "CompanyBaseViewController.h"
    @interface CompanyMapCell ()<MKMapViewDelegate> {
        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
    

    相关文章

      网友评论

      • sea7reen:球iOS的代码。
      • tttony3:等更新
        Eric__li:@tttony3 http://www.jianshu.com/p/8b7ede8b7288 出来啦, 希望能帮到你,能够给你提供思路

      本文标题:iOS类微信朋友圈图片放大效果,点击图片放大动画

      本文链接:https://www.haomeiwen.com/subject/fvohjttx.html