瀑布流相冊(cè)+自定義跳轉(zhuǎn)動(dòng)畫(huà)

一個(gè)簡(jiǎn)單的demo, 關(guān)于自定義瀑布流和自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà), 功能值實(shí)現(xiàn)了一部分,是可以反圖片的真實(shí)大小的,所以我的網(wǎng)絡(luò)加載的圖片就增加了兩個(gè)字段width和height,網(wǎng)絡(luò)加載圖片的問(wèn)題就這么解決了吧!手勢(shì)返回還沒(méi)有添加(與scrollview自帶的手勢(shì)沖突,還沒(méi)解決),只支持按鈕返回. 如果有建議的話可以給我留言,最重要的一點(diǎn)是返回的時(shí)候會(huì)自己定位,算是這樣吧! 廢話不多說(shuō), 下面進(jìn)入正題!

下面, 我會(huì)把代碼詳細(xì)寫(xiě)出來(lái)的, 盡量讓所有人都能實(shí)現(xiàn)!

//
//  XZPhotoBrowserViewController.h
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/8/4.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XZPhotoBrowserViewController : UIViewController

@property (nonatomic, strong) UICollectionView *collectionView;

@property (nonatomic, strong) NSMutableDictionary *offsetDictionary;

@end


//
//  XZPhotoBrowserViewController.m
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/8/4.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//


#import "XZPhotoBrowserViewController.h"
#import "XZPhotoBrowserItem.h"
#import "XZPhotoBrowserFlowLayout.h"
#import "PhotoDetailViewController.h"
#import "XZPhotoBrowserPushTransition.h"
#import "XZPhotoBrowserModel.h"
#import "UIImageView+WebCache.h"

@interface XZPhotoBrowserViewController ()<UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UINavigationControllerDelegate, PhotoDetailDelegate>
/**
 *  數(shù)據(jù)源數(shù)組
 */
@property (nonatomic, strong) NSMutableArray *dataArray;
/**
 *  存放標(biāo)識(shí)符的字典(不知道重用的解決辦法,有的話可以告訴我qq:916391479)
 */
@property (nonatomic, strong) NSMutableDictionary *identifierDic;
/**
 *  自定義描述對(duì)象
 */
@property (nonatomic, strong) XZPhotoBrowserFlowLayout *flowLayout;
/**
 *  存放從plist中取出的數(shù)據(jù)
 */
@property (nonatomic, strong) NSMutableArray *plistArray;

@end

static NSString *identifier = @"identifierCell";

@implementation XZPhotoBrowserViewController

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    self.navigationController.delegate = self;
}
/**
 *  push到詳情頁(yè)的時(shí)候走自定義動(dòng)畫(huà)
 */
- (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
    if ([toVC isKindOfClass:[PhotoDetailViewController class]]) {
        //初始化自定義push動(dòng)畫(huà)
        XZPhotoBrowserPushTransition *transition = [[XZPhotoBrowserPushTransition alloc]init];
        return transition;
    }else{
        return nil;
    }
}

- (void)xzPhotoBrowserSelectIndex:(NSInteger)index
{
    UICollectionViewLayoutAttributes *attributes = self.flowLayout.itemsAttributes[index];
    CGFloat bottomLine = attributes.frame.origin.y + attributes.frame.size.height + 5;
    CGFloat screenH = [UIScreen mainScreen].bounds.size.height - 64;
    if (bottomLine > screenH) {
        self.collectionView.contentOffset = CGPointMake(0, bottomLine - screenH);
    }else{
        self.collectionView.contentOffset = CGPointMake(0, 0);
    }
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //從plist中取出數(shù)據(jù),轉(zhuǎn)為模型,存放到數(shù)組中
    NSString *path = [[NSBundle mainBundle] pathForResource:@"photos.plist" ofType:nil];
    NSDictionary *dic = [NSDictionary dictionaryWithContentsOfFile:path];
    NSArray *arr = dic[@"content"];
    [arr enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        XZPhotoBrowserModel *model = [[XZPhotoBrowserModel alloc] init];
        [model setValuesForKeysWithDictionary:arr[idx]];
        [self.plistArray addObject:model];
    }];
    //初始化標(biāo)識(shí)符字典
    self.identifierDic = [NSMutableDictionary dictionary];
    //將集合視圖添加到view上
    [self.view addSubview:self.collectionView];
}
/**
 *  添加數(shù)據(jù)按鈕
 */
- (IBAction)addAction:(UIBarButtonItem *)sender {
    if (self.dataArray.count == self.plistArray.count) return;
    [self.dataArray addObject:self.plistArray[self.dataArray.count]];
    self.flowLayout.images = self.dataArray;
    [self.collectionView reloadData];
}
/**
 *  清除所有數(shù)據(jù)按鈕
 */
- (IBAction)clearAction:(UIBarButtonItem *)sender {
    //清空數(shù)據(jù)源
    [self.dataArray removeAllObjects];
    //清空標(biāo)識(shí)符字典
    [self.identifierDic removeAllObjects];
    [self.offsetDictionary removeAllObjects];
    //刷新UI
    [self.collectionView reloadData];
}

#pragma mark --- 代理方法
// 設(shè)置分區(qū)內(nèi)視圖個(gè)數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.dataArray.count;
}
// 設(shè)置視圖cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    //從標(biāo)識(shí)符字典中根據(jù)key取出唯一的標(biāo)識(shí)符
    NSString *fier = [self.identifierDic objectForKey:[NSString stringWithFormat:@"%@", indexPath]];
    if (fier == nil) {
        //如果不存在,創(chuàng)建一個(gè)唯一的標(biāo)識(shí)符
        fier = [NSString stringWithFormat:@"XZPhotoBrowser%@", indexPath];
        //添加到字典中
        [self.identifierDic setValue:fier forKey:[NSString stringWithFormat:@"%@", indexPath]];
        //注冊(cè)item
        [self.collectionView registerClass:[XZPhotoBrowserItem class] forCellWithReuseIdentifier:fier];
    }
    //從重用池中取出item
    XZPhotoBrowserItem *cell = [collectionView dequeueReusableCellWithReuseIdentifier:fier forIndexPath:indexPath];
    XZPhotoBrowserModel *model = self.dataArray[indexPath.row];
    [cell.photo sd_setImageWithURL:[NSURL URLWithString:model.url] placeholderImage:nil];
    [self.offsetDictionary setObject:@(cell.frame.origin.y + cell.frame.size.height + 5) forKey:[NSString stringWithFormat:@"%ld", indexPath.row]];
    return cell;
}
- (NSMutableDictionary *)offsetDictionary
{
    if (!_offsetDictionary) {
        _offsetDictionary = [NSMutableDictionary dictionary];
    }
    return _offsetDictionary;
}

// 設(shè)置分區(qū)個(gè)數(shù)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
//item點(diǎn)擊事件(push到詳情)
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    PhotoDetailViewController *detail = [[PhotoDetailViewController alloc] init];
    detail.dataArray = self.dataArray;
    detail.delegate = self;
    detail.selectIndex = indexPath.row;
    [self.navigationController pushViewController:detail animated:YES];
}

#pragma mark ---- 懶加載
//集合視圖
- (UICollectionView *)collectionView
{
    if (!_collectionView) {
        _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 64) collectionViewLayout:self.flowLayout];
        _collectionView.backgroundColor = [UIColor whiteColor];
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
    }
    return _collectionView;
}
//自定義描述對(duì)象
- (XZPhotoBrowserFlowLayout *)flowLayout
{
    if (!_flowLayout) {
        _flowLayout = [[XZPhotoBrowserFlowLayout alloc] init];
        _flowLayout.images = self.dataArray;
        _flowLayout.xzColumnsCount = 3;
    }
    return _flowLayout;
}
//數(shù)據(jù)源
- (NSMutableArray *)dataArray
{
    if (!_dataArray) {
        _dataArray = @[].mutableCopy;
    }
    return _dataArray;
}
//plist數(shù)據(jù)
- (NSMutableArray *)plistArray
{
    if (!_plistArray) {
        _plistArray = [NSMutableArray array];
    }
    return _plistArray;
}

@end

//
//  PhotoDetailViewController.h
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/8/4.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import <UIKit/UIKit.h>

@protocol PhotoDetailDelegate <NSObject>

- (void)xzPhotoBrowserSelectIndex:(NSInteger)index;

@end

@interface PhotoDetailViewController : UIViewController

@property (nonatomic, strong) UICollectionView *collectionView;
/**
 *  數(shù)據(jù)源
 */
@property (nonatomic, copy) NSArray *dataArray;
/**
 *  當(dāng)前顯示的item下標(biāo)
 */
@property (nonatomic, assign) NSInteger selectIndex;
/**
 *  創(chuàng)建一個(gè)臨時(shí)的imageView,用于實(shí)現(xiàn)動(dòng)畫(huà)效果
 */
@property (nonatomic, strong) UIImageView *tmpImageView;

@property (nonatomic, assign) id<PhotoDetailDelegate> delegate;

@end

//
//  PhotoDetailViewController.m
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/8/4.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import "PhotoDetailViewController.h"
#import "PhotoDetailItem.h"
#import "XZPhotoBrowserViewController.h"
#import "XZPhotoBrowserPopTransition.h"
#import "XZPhotoBrowserModel.h"
#import "UIImageView+WebCache.h"
#import "PublicMethod.h"

@interface PhotoDetailViewController ()<UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UINavigationControllerDelegate>

//手勢(shì)沒(méi)做呢!!!手勢(shì)沒(méi)做呢!!!手勢(shì)沒(méi)做呢!!!
@property (nonatomic, strong) UIPercentDrivenInteractiveTransition *percentDrivenTransition;

@end

@implementation PhotoDetailViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.title = @"Browzer";
    self.navigationController.delegate = self;
    //注冊(cè)
    [self.collectionView registerClass:[PhotoDetailItem class] forCellWithReuseIdentifier:@"identifier"];
    //將集合視圖添加到view上
    [self.view addSubview:self.collectionView];
    self.view.backgroundColor = [UIColor blackColor];
    //設(shè)置集合視圖偏移量
    self.collectionView.contentOffset = CGPointMake(self.view.frame.size.width * self.selectIndex, 0);
    //設(shè)置臨時(shí)imageview顯示的哪張圖片
    [self initTmpImageView:self.selectIndex];
    self.collectionView.hidden = YES;
}

/**
 *  設(shè)置臨時(shí)imageview顯示的哪張圖片
 */
- (void)initTmpImageView:(NSInteger)index
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(xzPhotoBrowserSelectIndex:)]) {
        [self.delegate xzPhotoBrowserSelectIndex:index];
    }
    XZPhotoBrowserModel *model = self.dataArray[index];
    [self.tmpImageView sd_setImageWithURL:[NSURL URLWithString:model.url] placeholderImage:nil];
    //定寬
    CGFloat w = self.view.frame.size.width - 10;
    //根據(jù)寬高比例獲得高
    CGFloat h = [PublicMethod getImageHeight:CGSizeMake(model.width, model.height) width:w];
    //設(shè)置frame
    self.tmpImageView.frame = CGRectMake(5, (self.view.frame.size.height - 64 - h) / 2.0, w, h);
}

-(void)edgePanGesture:(UIScreenEdgePanGestureRecognizer *)recognizer
{
    CGFloat progress = [recognizer translationInView:self.view].x / (self.view.bounds.size.width * 1.0);
    progress = MIN(1.0, MAX(0.0, progress));
    
    if (recognizer.state == UIGestureRecognizerStateBegan) {
        self.percentDrivenTransition = [[UIPercentDrivenInteractiveTransition alloc] init];
        [self.navigationController popViewControllerAnimated:YES];
    }else if (recognizer.state == UIGestureRecognizerStateChanged){
        [self.percentDrivenTransition updateInteractiveTransition:progress];
    }else if (recognizer.state == UIGestureRecognizerStateCancelled || recognizer.state == UIGestureRecognizerStateEnded){
        if (progress > 0.5) {
            [self.percentDrivenTransition finishInteractiveTransition];
        }else{
            [self.percentDrivenTransition cancelInteractiveTransition];
        }
        self.percentDrivenTransition = nil;
    }
}

- (id<UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController
{
    if ([animationController isKindOfClass:[XZPhotoBrowserPopTransition class]]) {
        return self.percentDrivenTransition;
    }else{
        return nil;
    }
}

- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
    XZPhotoBrowserPopTransition *pop = [[XZPhotoBrowserPopTransition alloc] init];
    return pop;
}
/**
 *  根據(jù)活動(dòng)偏移量設(shè)置臨時(shí)imageview圖片
 */
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    self.selectIndex = scrollView.contentOffset.x / self.view.frame.size.width;
    [self initTmpImageView:self.selectIndex];
}

#pragma mark --- 代理方法
// 設(shè)置分區(qū)內(nèi)視圖個(gè)數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.dataArray.count;
}
// 設(shè)置視圖cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    PhotoDetailItem *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath];
    XZPhotoBrowserModel *model = self.dataArray[indexPath.row];
    [cell.detailImageView sd_setImageWithURL:[NSURL URLWithString:model.url] placeholderImage:nil];
    return cell;
}

// 設(shè)置分區(qū)個(gè)數(shù)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
/**
 *  點(diǎn)擊事件
 */
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%ld", (long)indexPath.row);
}
#pragma mark ---- 懶加載
- (UICollectionView *)collectionView
{
    if (!_collectionView) {
        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        // item尺寸
        flowLayout.itemSize = CGSizeMake(self.view.frame.size.width - 10, self.view.frame.size.height - 64);
        flowLayout.minimumLineSpacing = 10;
        flowLayout.sectionInset = UIEdgeInsetsMake(0, 5, 0, 5);
        _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 64) collectionViewLayout:flowLayout];
        _collectionView.backgroundColor = [UIColor blackColor];
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.pagingEnabled = YES;
    }
    return _collectionView;
}
//臨時(shí)imageview
- (UIImageView *)tmpImageView
{
    if (!_tmpImageView) {
        _tmpImageView = [UIImageView new];
        [self.view addSubview:_tmpImageView];
        _tmpImageView.contentMode = UIViewContentModeScaleAspectFit;
        _tmpImageView.alpha = 0;
    }
    return _tmpImageView;
}
//數(shù)據(jù)源
- (NSArray *)dataArray
{
    if (!_dataArray) {
        _dataArray = @[];
    }
    return _dataArray;
}

@end

//
//  XZPhotoBrowserFlowLayout.h
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/7/30.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import <UIKit/UIKit.h>

@class XZPhotoBrowserModel;

@interface XZPhotoBrowserFlowLayout : UICollectionViewFlowLayout

@property (nonatomic, copy) NSArray<XZPhotoBrowserModel *> *images;
/**
 *  列數(shù) 默認(rèn)為2
 */
@property (nonatomic, assign) NSUInteger xzColumnsCount;

@property (nonatomic,strong)NSMutableArray *itemsAttributes;//保存所有列高度的數(shù)組

@end

//
//  XZPhotoBrowserFlowLayout.m
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/7/30.
//  Copyright ? 2016年高雅馨. All rights reserved.
//

#import "XZPhotoBrowserFlowLayout.h"
#import "XZPhotoBrowserItem.h"
#import "XZPhotoBrowserModel.h"

@interface XZPhotoBrowserFlowLayout ()

@property (nonatomic,assign)NSUInteger columnsCount;
@property (nonatomic,strong)NSMutableArray *COLUMNSHEIGHTS;//保存所有列高度的數(shù)組

@end

@implementation XZPhotoBrowserFlowLayout

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

- (void)prepareLayout
{
    //設(shè)置列數(shù) 列數(shù)大于等于2
    self.columnsCount = self.xzColumnsCount ? self.xzColumnsCount > 2?self.xzColumnsCount:2 : 2;
    //獲取item個(gè)數(shù)
    NSUInteger itemCounts = [[self collectionView] numberOfItemsInSection:0];
    //初始化
    self.itemsAttributes = [NSMutableArray arrayWithCapacity:itemCounts];
    
    self.COLUMNSHEIGHTS = [NSMutableArray arrayWithCapacity:self.columnsCount];
    for (NSInteger index = 0; index < self.columnsCount; index++) {
        [self.COLUMNSHEIGHTS addObject:@0];
    }
    
    for (NSUInteger index = 0; index < itemCounts; index++) {
        //找到最短列
        XZPhotoBrowserModel *model = self.images[index];
        NSUInteger shtIndex = [self findShortestColumn];
        
        NSUInteger origin_x = shtIndex * ([self columnWidth] + 5) + 5;
        
        NSUInteger origin_y = [self.COLUMNSHEIGHTS[shtIndex] integerValue] + 5;
        
        NSUInteger size_width = 0;
        if (shtIndex < self.columnsCount - 1 && [self.COLUMNSHEIGHTS[shtIndex] floatValue] == [self.COLUMNSHEIGHTS[shtIndex+1] floatValue] && model.width >= 1.5 * model.height) {
            size_width = 2 * [self columnWidth];
        }else{
            size_width = [self columnWidth];
        }
        NSUInteger size_height = [self getImageHeight:CGSizeMake(model.width, model.height) width:size_width];
        if (size_width == 2 * [self columnWidth]) {
            self.COLUMNSHEIGHTS[shtIndex] = @(origin_y + size_height);
            self.COLUMNSHEIGHTS[shtIndex + 1] = @(origin_y + size_height);
        }else{
            self.COLUMNSHEIGHTS[shtIndex] = @(origin_y + size_height);
        }
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:0];
        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        attributes.frame = CGRectMake(origin_x, origin_y, size_width, size_height);
        [self.itemsAttributes addObject:attributes];
    }
}

- (NSUInteger)getImageHeight:(CGSize)size width:(NSUInteger)width
{
    float integerW = size.width;
    float integerH = size.height;
    float scale = width / integerW;
    NSNumber *number = [NSNumber numberWithFloat:scale * integerH];
    return [number unsignedIntegerValue];
}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.itemsAttributes;
}
//設(shè)置集合視圖contentsize
- (CGSize)collectionViewContentSize
{
    CGSize size = self.collectionView.bounds.size;
    NSUInteger longstIndex = [self findLongestColumn];
    float columnMax = [self.COLUMNSHEIGHTS[longstIndex] floatValue];
    size.height = columnMax + 5;
    return size;
}

#pragma mark ---- public
//找出最短列
- (NSUInteger)findShortestColumn
{
    NSUInteger shortestIndex = 0;
    CGFloat shortestValue = MAXFLOAT;
    
    NSUInteger index = 0;
    for (NSNumber *columnHeight in self.COLUMNSHEIGHTS) {
        if ([columnHeight floatValue] < shortestValue) {
            shortestValue = [columnHeight floatValue];
            shortestIndex = index;
        }
        index++;
    }
    return shortestIndex;
}
//尋找最長(zhǎng)列
- (NSUInteger)findLongestColumn
{
    NSUInteger longestIndex = 0;
    CGFloat longestValue = 0;
    
    NSUInteger index = 0;
    for (NSNumber *columnHeight in self.COLUMNSHEIGHTS) {
        if ([columnHeight floatValue] > longestValue) {
            longestValue = [columnHeight floatValue];
            longestIndex = index;
        }
        index++;
    }
    return longestIndex;
}

- (float)columnWidth
{
    return roundf((self.collectionView.bounds.size.width - (self.columnsCount + 1) * 5) / self.columnsCount);
}

@end
  • 這里是動(dòng)畫(huà)所需要的代碼, 只需要在XZPhotoBrowserPopTransition.h里簽一個(gè)<UIViewControllerAnimatedTransitioning>協(xié)議就OK
//
//  XZPhotoBrowserPopTransition.m
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/8/3.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import "XZPhotoBrowserPopTransition.h"
#import "XZPhotoBrowserViewController.h"
#import "PhotoDetailViewController.h"
#import "PhotoDetailItem.h"
#import "XZPhotoBrowserItem.h"
#import "XZPhotoBrowserFlowLayout.h"

@implementation XZPhotoBrowserPopTransition

- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
{
    return 0.7f;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    PhotoDetailViewController *fromVC = (PhotoDetailViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    XZPhotoBrowserViewController *toVC = (XZPhotoBrowserViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *containerView = [transitionContext containerView];
    
    UIImageView *snapShotView = [UIImageView new];
    snapShotView.image = fromVC.tmpImageView.image;
    snapShotView.backgroundColor = [UIColor redColor];
    snapShotView.frame = [containerView convertRect:fromVC.tmpImageView.frame fromView:fromVC.tmpImageView.superview];
    fromVC.collectionView.hidden = YES;
    
    
    toVC.view.frame = [transitionContext finalFrameForViewController:toVC];
    
    [containerView insertSubview:toVC.view belowSubview:fromVC.view];
    [containerView addSubview:snapShotView];
    
    XZPhotoBrowserFlowLayout *flowLayout = (XZPhotoBrowserFlowLayout *)toVC.collectionView.collectionViewLayout;
    UICollectionViewLayoutAttributes *attributes = flowLayout.itemsAttributes[fromVC.selectIndex];
    UIView *tmpView = [UIView new];
    //這個(gè)顏色一定要和collectionview的背景色一樣
    tmpView.backgroundColor = [UIColor whiteColor];
    
    [toVC.collectionView addSubview:tmpView];
    tmpView.frame = CGRectMake(attributes.frame.origin.x, attributes.frame.origin.y, attributes.frame.size.width, attributes.frame.size.height);
    [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0f usingSpringWithDamping:0.6f initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        fromVC.view.alpha = 0.0f;
        snapShotView.frame = CGRectMake(attributes.frame.origin.x, attributes.frame.origin.y + 64 - toVC.collectionView.contentOffset.y, attributes.frame.size.width, attributes.frame.size.height);
    } completion:^(BOOL finished) {
        [snapShotView removeFromSuperview];
        fromVC.collectionView.hidden = NO;
        [tmpView removeFromSuperview];
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];
}

@end
  • .h同上(⊙o⊙)哦
//
//  XZPhotoBrowserPushTransition.m
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/8/3.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import "XZPhotoBrowserPushTransition.h"
#import "XZPhotoBrowserViewController.h"
#import "PhotoDetailViewController.h"
#import "XZPhotoBrowserItem.h"
#import "PhotoDetailItem.h"

@implementation XZPhotoBrowserPushTransition

- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
{
    return 0.7f;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    XZPhotoBrowserViewController *fromVC = (XZPhotoBrowserViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    PhotoDetailViewController *toVC = (PhotoDetailViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *containerView = [transitionContext containerView];
    
    XZPhotoBrowserItem *cell = (XZPhotoBrowserItem *)[fromVC.collectionView cellForItemAtIndexPath:[[fromVC.collectionView indexPathsForSelectedItems] firstObject]];
    
    UIImageView *snapShotView = [UIImageView new];
    snapShotView.image = cell.photo.image;
    snapShotView.frame = [containerView convertRect:cell.photo.frame fromView:cell.photo.superview];
    cell.photo.hidden = YES;
    
    toVC.view.frame = [transitionContext finalFrameForViewController:toVC];
    toVC.view.alpha = 0;
    toVC.collectionView.hidden = YES;
    
    [containerView addSubview:toVC.view];
    [containerView addSubview:snapShotView];
    
    
    [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0f usingSpringWithDamping:0.6f initialSpringVelocity:1.0f options:UIViewAnimationOptionCurveLinear animations:^{
        [containerView layoutIfNeeded];
        toVC.view.alpha = 1;
        snapShotView.frame = [containerView convertRect:CGRectMake(toVC.tmpImageView.frame.origin.x, toVC.tmpImageView.frame.origin.y, toVC.tmpImageView.frame.size.width, toVC.tmpImageView.frame.size.height) fromView:toVC.tmpImageView.superview];
    } completion:^(BOOL finished) {
        toVC.collectionView.hidden = NO;
        cell.photo.hidden = NO;
        [snapShotView removeFromSuperview];
        [transitionContext completeTransition:!transitionContext.transitionWasCancelled];
    }];
}

@end
  • 這里呢, 就是我開(kāi)頭所說(shuō)的增加了兩個(gè)字段width和height
//
//  PublicMethod.h
//  XZPhotoBrowser
//
//  Created by 高雅馨 on 16/8/6.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface PublicMethod : NSObject

/**
 *  根據(jù)寬高比例獲得高
 *
 *  @param size  圖片size
 *  @param width 實(shí)際寬度
 *
 *  @return 實(shí)際高度
 */
+ (CGFloat)getImageHeight:(CGSize)size width:(CGFloat)width;

@end


//
//  PublicMethod.m
//  XZPhotoBrowser
//
//  Created by高雅馨 on 16/8/6.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import "PublicMethod.h"

@implementation PublicMethod

+ (CGFloat)getImageHeight:(CGSize)size width:(CGFloat)width
{
    float integerW = size.width;
    float integerH = size.height;
    float scale = width / integerW;
    NSNumber *number = [NSNumber numberWithFloat:scale * integerH];
    return [number floatValue];
}

@end
  • 寫(xiě)到這里我們就大功告成了, 還不錯(cuò)吧!下面就來(lái)看看我們努力的成果咯!
  • 第一次做動(dòng)態(tài)圖, 效果有點(diǎn)不清晰哦,(__) 嘻嘻……湊合看吧! 喜歡就給留個(gè)贊再走哦??
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,036評(píng)論 25贊 709
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,270評(píng)論 5贊 13
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,690評(píng)論 6贊 30
  • 感受 沒(méi)有優(yōu)美的語(yǔ)言，沒(méi)有華麗的辭藻。堅(jiān)持一字一句的記錄生活。當(dāng)是和自己交流。 有的時(shí)候，莫名的...
    愛(ài)麗絲的月牙兔閱讀 200評(píng)論 0贊 0
  • Activity簡(jiǎn)介 Activity是一種展示型組件，用于向用戶直接展示一個(gè)界面，并且可以接受用戶的輸入信息從而...
    藍(lán)楓zeke閱讀 1,988評(píng)論 4贊 9

友情鏈接更多精彩內(nèi)容