對(duì)于圖片來(lái)說(shuō)，除了表情包，幾乎都會(huì)被點(diǎn)擊查看大圖。今天就講解一個(gè)查看和收起大圖的動(dòng)畫(huà)效果，先直接看效果圖：
如圖所示，最開(kāi)始是一個(gè)小圖，點(diǎn)擊小圖可以查看大圖。大圖會(huì)從小圖的位置和大小“彈”出來(lái)，同時(shí)背景變成半透明的陰影。點(diǎn)擊大圖或者陰影后，收起大圖，同樣地彈回到小圖去，同時(shí)去掉陰影背景，就像是一張圖片在伸大縮小一樣。
現(xiàn)在看看這是怎么實(shí)現(xiàn)的。在思考一個(gè)動(dòng)畫(huà)的實(shí)現(xiàn)方法時(shí)，把動(dòng)畫(huà)的動(dòng)作進(jìn)行分解然后再一個(gè)個(gè)去思考怎么實(shí)現(xiàn)是一個(gè)好的習(xí)慣，我們稍微分解一下，這個(gè)動(dòng)畫(huà)在顯示大圖和收起大圖的時(shí)候做了這些事情：
這樣看其實(shí)還蠻簡(jiǎn)單的，下面看代碼怎么實(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è)好的常量：屏幕的高和寬，這樣就會(huì)根據(jù)手機(jī)的屏幕大小來(lái)保證圖片始終是居中顯示的，關(guān)于這兩個(gè)常量，可以查看我這篇博客：iOS獲取屏幕寬高、設(shè)備型號(hào)、系統(tǒng)版本信息
好現(xiàn)在小圖已經(jīng)添加到界面上了，我們也給小圖添加了響應(yīng)點(diǎn)擊的方法，只需要在響應(yīng)方法中實(shí)現(xiàn)動(dòng)畫(huà)就可以了。但是在這之前，我們先來(lái)完成大圖片和陰影背景的初始化：
// 大圖視圖- (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è)方法來(lái)初始化大圖和陰影背景，大圖的大小設(shè)為了垂直居中，寬度正好與屏幕一致，高度與寬度相同，是個(gè)正方形。陰影背景則是占據(jù)整個(gè)屏幕。同時(shí)，我也設(shè)置了兩個(gè)視圖的點(diǎn)擊相應(yīng)方法，都是收起大圖的動(dòng)畫(huà)方法，我們之后再去實(shí)現(xiàn)。現(xiàn)在，我們可以來(lái)著手實(shí)現(xiàn)顯示大圖的動(dòng)畫(huà)了。
// 顯示大圖- (void)viewBigImage { [self bigImageView];// 初始化大圖 // 讓大圖從小圖的位置和大小開(kāi)始出現(xiàn) CGRect originFram = _bigImageView.frame; _bigImageView.frame = self.smallImageView.frame; [self.view addSubview:_bigImageView]; // 動(dòng)畫(huà)到大圖該有的大小 [UIView animateWithDuration:0.3 animations:^{ // 改變大小 _bigImageView.frame = originFram; // 改變位置 _bigImageView.center = self.view.center;// 設(shè)置中心位置到新的位置 }]; // 添加陰影視圖 [self bgView]; [self.view addSubview:_bgView]; // 將大圖放到最上層，否則會(huì)被后添加的陰影蓋住 [self.view bringSubviewToFront:_bigImageView];}看代碼，我們首先調(diào)用了大圖的初始化方法，但是注意，此時(shí)還并沒(méi)有將大圖添加到界面上，如果這時(shí)候添加，就會(huì)直接顯示大圖了，在此之前，我們先保存了大圖自身的尺寸，然后將其尺寸位置設(shè)為和小圖完全一樣，然后才將它添加到界面上，從小圖的位置和尺寸，去動(dòng)畫(huà)到大圖原本的尺寸，看起來(lái)就像是小圖放大成了大圖一樣對(duì)吧。這里的動(dòng)畫(huà)我們使用的是最簡(jiǎn)單的iOS 7開(kāi)始支持的基于block的UIView動(dòng)畫(huà).
然后，我們初始化了陰影背景視圖，并添加到界面上，此時(shí)不要忘記，要再次將大圖手動(dòng)推送到最上層，否則是會(huì)被后添加的陰影視圖覆蓋的。
到此，顯示大圖的動(dòng)畫(huà)就結(jié)束了，挺簡(jiǎn)單的吧，接下來(lái)我們看收起大圖的動(dòng)畫(huà)，基本就是把上面的步驟倒過(guò)來(lái)了一次。
// 收起大圖- (void)dismissBigImage { [self.bgView removeFromSuperview];// 移除陰影 // 將大圖動(dòng)畫(huà)回小圖的位置和大小 [UIView animateWithDuration:0.3 animations:^{ // 改變大小 _bigImageView.frame = self.smallImageView.frame; // 改變位置 _bigImageView.center = self.smallImageView.center;// 設(shè)置中心位置到新的位置 }]; // 延遲執(zhí)行，移動(dòng)回后再消滅掉 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; });}我們先移除陰影背景，然后將大圖動(dòng)畫(huà)回小圖的尺寸和位置，看起來(lái)就像是縮小成了小圖一樣。然后我們使用了一個(gè)延遲函數(shù)，確保在圖片收縮回小圖以后，再將圖片移除界面，保證動(dòng)畫(huà)的效果。
至此，就完成了我們整個(gè)的動(dòng)畫(huà)了。這個(gè)例子中圖片是中規(guī)中矩地放在居中位置，你也可以試一下將小圖放在其他位置，其實(shí)真實(shí)的app中很少有居中放置的，從別的地方伸縮放大縮小效果會(huì)更加有趣的。當(dāng)然了，如果小圖的位置不好獲取，那就直接設(shè)為從屏幕的中點(diǎn)開(kāi)始縮放，效果也不錯(cuò)。另外，你可能會(huì)疑惑為什么我要另行添加一個(gè)大圖的對(duì)象，而不直接對(duì)小圖的尺寸進(jìn)行動(dòng)畫(huà)呢？其實(shí)是完全可以的，只是在我的工程中有這個(gè)需求，所以我就直接拿過(guò)來(lái)講了哈哈哈。
這里是我的示例工程：https://github.com/Cloudox/ViewBigImageDemo
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
