iOS點(diǎn)擊查看大圖的動畫效果

更新時(shí)間：2016年11月23日 10:51:16 作者：Cloudox_

這篇文章主要為大家詳細(xì)介紹了iOS點(diǎn)擊查看大圖的動畫效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

對于圖片來說，除了表情包，幾乎都會被點(diǎn)擊查看大圖。今天就講解一個(gè)查看和收起大圖的動畫效果，先直接看效果圖：

如圖所示，最開始是一個(gè)小圖，點(diǎn)擊小圖可以查看大圖。大圖會從小圖的位置和大小“彈”出來，同時(shí)背景變成半透明的陰影。點(diǎn)擊大圖或者陰影后，收起大圖，同樣地彈回到小圖去，同時(shí)去掉陰影背景，就像是一張圖片在伸大縮小一樣。

現(xiàn)在看看這是怎么實(shí)現(xiàn)的。在思考一個(gè)動畫的實(shí)現(xiàn)方法時(shí)，把動畫的動作進(jìn)行分解然后再一個(gè)個(gè)去思考怎么實(shí)現(xiàn)是一個(gè)好的習(xí)慣，我們稍微分解一下，這個(gè)動畫在顯示大圖和收起大圖的時(shí)候做了這些事情：

打開時(shí)先顯示一個(gè)半透明的陰影背景；
然后顯示一個(gè)逐漸變大的圖片，直到撐到屏幕的邊界；
收起時(shí)先讓陰影背景消失；
然后將圖片逐漸收小到小圖原本的大小。

這樣看其實(shí)還蠻簡單的，下面看代碼怎么實(shí)現(xiàn)。

首先我們定義三個(gè)屬性，因?yàn)槲覀冃枰诙鄠€(gè)方法中調(diào)用，所以定義為類的@property：

@property (nonatomic, strong) UIImageView *smallImageView;// 小圖視圖
@property (nonatomic, strong) UIImageView *bigImageView;// 大圖視圖
@property (nonatomic, strong) UIView *bgView;// 陰影視圖

然后我們將小圖片直接添加到界面上去：

- (void)viewDidLoad {
 [super viewDidLoad];

 // 小圖
 self.smallImageView = [[UIImageView alloc] initWithFrame:CGRectMake((SCREENWIDTH - 100)/2, (SCREENHEIGHT - 100)/2, 100, 100)];
 self.smallImageView.image = [UIImage imageNamed:@"icon"];
 // 添加點(diǎn)擊響應(yīng)
 self.smallImageView.userInteractionEnabled = YES;
 UITapGestureRecognizer *imageTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewBigImage)];
 [self.smallImageView addGestureRecognizer:imageTap];
 [self.view addSubview:self.smallImageView];
}

注意這里我在設(shè)置小圖的大小時(shí)用到了兩個(gè)事先設(shè)好的常量：屏幕的高和寬，這樣就會根據(jù)手機(jī)的屏幕大小來保證圖片始終是居中顯示的，關(guān)于這兩個(gè)常量，可以查看我這篇博客：iOS獲取屏幕寬高、設(shè)備型號、系統(tǒng)版本信息

好現(xiàn)在小圖已經(jīng)添加到界面上了，我們也給小圖添加了響應(yīng)點(diǎn)擊的方法，只需要在響應(yīng)方法中實(shí)現(xiàn)動畫就可以了。但是在這之前，我們先來完成大圖片和陰影背景的初始化：

// 大圖視圖
- (UIImageView *)bigImageView {
 if (nil == _bigImageView) {
 _bigImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, (SCREENHEIGHT - SCREENWIDTH) / 2, SCREENWIDTH, SCREENWIDTH)];
 [_bigImageView setImage:self.smallImageView.image];
 // 設(shè)置大圖的點(diǎn)擊響應(yīng)，此處為收起大圖
 _bigImageView.userInteractionEnabled = YES;
 UITapGestureRecognizer *imageTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissBigImage)];
 [_bigImageView addGestureRecognizer:imageTap];
 }
 return _bigImageView;
}

// 陰影視圖
- (UIView *)bgView {
 if (nil == _bgView) {
 _bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREENWIDTH, SCREENHEIGHT)];
 _bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
 // 設(shè)置陰影背景的點(diǎn)擊響應(yīng)，此處為收起大圖
 _bgView.userInteractionEnabled = YES;
 UITapGestureRecognizer *bgTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissBigImage)];
 [_bgView addGestureRecognizer:bgTap];
 }
 return _bgView;
}

可以看到我們單獨(dú)使用了兩個(gè)方法來初始化大圖和陰影背景，大圖的大小設(shè)為了垂直居中，寬度正好與屏幕一致，高度與寬度相同，是個(gè)正方形。陰影背景則是占據(jù)整個(gè)屏幕。同時(shí)，我也設(shè)置了兩個(gè)視圖的點(diǎn)擊相應(yīng)方法，都是收起大圖的動畫方法，我們之后再去實(shí)現(xiàn)?，F(xiàn)在，我們可以來著手實(shí)現(xiàn)顯示大圖的動畫了。

// 顯示大圖
- (void)viewBigImage {
 [self bigImageView];// 初始化大圖

 // 讓大圖從小圖的位置和大小開始出現(xiàn)
 CGRect originFram = _bigImageView.frame;
 _bigImageView.frame = self.smallImageView.frame;
 [self.view addSubview:_bigImageView];

 // 動畫到大圖該有的大小
 [UIView animateWithDuration:0.3 animations:^{
 // 改變大小
 _bigImageView.frame = originFram;
 // 改變位置
 _bigImageView.center = self.view.center;// 設(shè)置中心位置到新的位置
 }];

 // 添加陰影視圖
 [self bgView];
 [self.view addSubview:_bgView];

 // 將大圖放到最上層，否則會被后添加的陰影蓋住
 [self.view bringSubviewToFront:_bigImageView];
}

看代碼，我們首先調(diào)用了大圖的初始化方法，但是注意，此時(shí)還并沒有將大圖添加到界面上，如果這時(shí)候添加，就會直接顯示大圖了，在此之前，我們先保存了大圖自身的尺寸，然后將其尺寸位置設(shè)為和小圖完全一樣，然后才將它添加到界面上，從小圖的位置和尺寸，去動畫到大圖原本的尺寸，看起來就像是小圖放大成了大圖一樣對吧。這里的動畫我們使用的是最簡單的iOS 7開始支持的基于block的UIView動畫，在我的這篇博客中也有詳細(xì)講解：iOS基礎(chǔ)動畫教程

然后，我們初始化了陰影背景視圖，并添加到界面上，此時(shí)不要忘記，要再次將大圖手動推送到最上層，否則是會被后添加的陰影視圖覆蓋的。

到此，顯示大圖的動畫就結(jié)束了，挺簡單的吧，接下來我們看收起大圖的動畫，基本就是把上面的步驟倒過來了一次。

// 收起大圖
- (void)dismissBigImage {
 [self.bgView removeFromSuperview];// 移除陰影

 // 將大圖動畫回小圖的位置和大小
 [UIView animateWithDuration:0.3 animations:^{
 // 改變大小
 _bigImageView.frame = self.smallImageView.frame;
 // 改變位置
 _bigImageView.center = self.smallImageView.center;// 設(shè)置中心位置到新的位置
 }];

 // 延遲執(zhí)行，移動回后再消滅掉
 double delayInSeconds = 0.3;
 __block ViewController* bself = self;
 dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
 dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
 [bself.bigImageView removeFromSuperview];
 bself.bigImageView = nil;
 bself.bgView = nil;
 });
}

我們先移除陰影背景，然后將大圖動畫回小圖的尺寸和位置，看起來就像是縮小成了小圖一樣。然后我們使用了一個(gè)延遲函數(shù)，確保在圖片收縮回小圖以后，再將圖片移除界面，保證動畫的效果。

至此，就完成了我們整個(gè)的動畫了。這個(gè)例子中圖片是中規(guī)中矩地放在居中位置，你也可以試一下將小圖放在其他位置，其實(shí)真實(shí)的app中很少有居中放置的，從別的地方伸縮放大縮小效果會更加有趣的。當(dāng)然了，如果小圖的位置不好獲取，那就直接設(shè)為從屏幕的中點(diǎn)開始縮放，效果也不錯(cuò)。另外，你可能會疑惑為什么我要另行添加一個(gè)大圖的對象，而不直接對小圖的尺寸進(jìn)行動畫呢？其實(shí)是完全可以的，只是在我的工程中有這個(gè)需求，所以我就直接拿過來講了哈哈哈。

這里是我的示例工程：https://github.com/Cloudox/ViewBigImageDemo

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: