iOS类微信朋友圈图片放大效果，点击图片放大动画
2016-07-05 本文已影响3483人
Eric__li
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
