如何实现点击图片之后放大,或缩放功能。

实现"查看大图"功能。

** 点击"图片"按钮, 显示大图

问：&1.点击图片之后就放大图片的功能的步骤是什么？

1>创建一个和屏幕一样大小的半透明UIView, 用来遮盖整个界面

2>需要把“图片按钮”, 放置在coverView的前面

3>将图片按钮放大

4>将这些操作放在block动画当中。

问：&2.黑色半透明的背景图片是一个什么控件？点击灰色背景后需要做哪些操作？

解析：是一个按钮，因为需要监听点击事件做事情。

1. 让"图片按钮"通过动画的方式回到原来的位置

2. 让"半透明背景"通过动画的方式透明度变成0, 然后从父容器中移除

* 实现思路（步骤）:

1> 添加一个"阴影"按钮, 因为该"阴影"要实现点击, 所以用"按钮”。

设置半透明 来作为蒙版

//0.点击之后马上就记录中间按钮的原始frame -—> 这里是为了后面蒙版被点击之后,能返回中间图片原有的值,所以这里先记录一下

self.iconFrame = self.minidleIamgeViewButton.frame;

// >1.先创建蒙版

UIButton *tempMengBanView = [[UIButton alloc] init]; //注意这里的蒙版是按钮,因为后面还需要点击它

//>2.再设置蒙版的属性
tempMengBanView.backgroundColor = [UIColor blackColor]; //背景为黑色
tempMengBanView.alpha = 0.0; //先将透明度设为0.然后再放到图片的动画之后,让它成为0.5
tempMengBanView.frame = self.view.bounds; //定义尺寸为全屏尺寸
[self.view addSubview:tempMengBanView]; //添加到根视图
self.tempMengBanView = tempMengBanView; //把临时创建的蒙版赋值给tempMengBanView这个属性

2> 然后再把"头像按钮"显示在"阴影”上面。 这个属性可以让这张图片任何时候都是显示在最上面:

//2.把中间图片按钮放置在所有图层的最上面

[self.view bringSubviewToFront:self.minidleIamgeViewButton];

3> 通过动画的方式改变"头像按钮"的frame(位置和尺寸)变成大图效果。

//3.设置中间按钮的frame尺寸和位置
CGFloat tempMD_W = self.view.bounds.size.width;
CGFloat tempMD_H = tempMD_W;
CGFloat tempMD_X = 0;
CGFloat tempMD_Y = (self.view.frame.size.height - tempMD_H) * 0.5;

//给这个放大的过程添加一个动画
[UIView animateWithDuration:1.0 animations:^{
tempMengBanView.alpha = 0.5; //让蒙版透明度变成0.5
self.minidleIamgeViewButton.frame = CGRectMake(tempMD_X, tempMD_Y, tempMD_W, tempMD_H);

}];

** 注意: 如果图片没有变大, 检查是否没有取消"自动布局(Auto Layout)"

选中图片—>点击文件属性—>Interface Buider Document—>去到"Use Auto Layout”的勾

**再来实现 点击"遮罩阴影", 回到小图的功能

# -—>这里是因为后面也要给蒙版创建点击事件,然而蒙版是临时创建的,外部方法还不能直接访问,所以这里可以先在外部定义一个全局属性,然后在蒙版创建后赋值给这个属性,这样就可以在方法中操作调用了

//定义临时蒙版的属性,最后把创建的临时蒙版赋值给这个属性

@property(nonatomic,weak)UIButton *tempMengBanView;

###

注意:这里使用的是weak弱引用, 这样用的原因是,在下面把这个按钮添加到了根视图,已经间接的强引用了(addSubview就表示强引用),所以这里不需要再用强引用,

[self.view addSubview:tempMengBanView]; //添加到根视图

self.tempMengBanView = tempMengBanView; //把临时创建的蒙版赋值给tempMengBanView这个属性

//3.再给这个临时创建的蒙版添加一个单击事件, 通过动画让图片回到原来的位置,结束再移除这个蒙版
// 注意,因为这里需要给这个蒙版添加事件,就需要调用属性,但是我们之前是用UIView来创建的这个蒙版,UIview是没有办法创建点击事件的,所以,我们这里需要把上面创建这个蒙版时候的UIView改为UIButton,这样就可以了

[tempMengBanView addTarget:self action:@selector(clickMengBanButton:) forControlEvents:UIControlEventTouchUpInside];

-(void)clickMengBanButton:(UIButton *)sender{

需求分析:

蒙版的点击事件之后,我们需要做什么:

1> 通过动画慢慢将"遮罩阴影"的透明度变为0

2> 通过动画慢慢将"头像图片"的frame修改为原来的位置

3> 在动画执行完毕后, 移除"遮罩阴影”

//1.让"中间头像按钮"通过动画的方式回到原来的值
//>1. 这里有个问题,那就是我们还不知道图片的原有尺寸和位置在什么,所以,我们需要做的是就是在点击了大图按钮之后,能同时指导中间头像按钮的frame,

//2.让"蒙版"通过动画的方式变成透明,然后移除
//>2. 这里同样有一个困扰,那就是因为蒙版是我们临时创建的,在这里根本没法访问到这个临时蒙版,所以,我们可以通过再创建一个属性的当时来定义这个蒙版, 也就是我们需要在点击大图按钮之后,把临时蒙版创建出来,赋值给这个属性,这样我们就可以访问了,
[UIView animateWithDuration:0.5 animations:^{
self.minidleIamgeViewButton.frame = self.iconFrame;
self.tempMengBanView.alpha = 0.0;
}completion:^(BOOL finished){
[self.tempMengBanView removeFromSuperview];

}];

}

//注册中间图片按钮的单击事件 ---拖线创建

- (IBAction)clickMinidleImageButton:(UIButton *)sender
{
//这里要做一次判断,那就是要弄清楚临时创建的蒙版是不是已经创建了,如果创建了,就调用缩小方法,如果没有实现就调用放大方法
//也是放大图片,就相当于调用了一次大图按钮,所做的事情
if (self.tempMengBanView == nil) {
//放大
[self clickBigViewButton:nil];
}else {
//缩小
[self clickMengBanButton:self.tempMengBanView];
}

}

附代码

//  ViewController.m
//  01_猜图游戏
#import "ViewController.h"
#import "DXQuestion.h"
@interface ViewController ()
@property (nonatomic, strong) NSArray *questions;
// 记录icon button的原始的frame
@property (nonatomic, assign) CGRect iconFrame;
@property (nonatomic, weak) UIButton *coverView;

@end@implementation ViewController
// 点击了大图按钮- (IBAction)didClickShowBigImageButton:(UIButton *)sender {

// 0. 记录 btnIcon 的frame
self.iconFrame = self.btnIcon.frame;
// 1. 创建一个和屏幕一样大小的半透明UIView, 用来遮盖整个界面
UIButton *coverView = [[UIButton alloc] init];
coverView.backgroundColor = [UIColor blackColor];
coverView.alpha = 0.0;
coverView.frame = self.view.bounds;
// 为半透明背景添加一个单击事件
[coverView addTarget:self action:@selector(didClickCoverView:) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:coverView];
self.coverView = coverView;

// 需要把"图片按钮", 放置在coverView的前面
[self.view bringSubviewToFront:self.btnIcon];

// 2. 讲头像按钮（图片按钮）放大
CGFloat iconW = self.view.bounds.size.width;
CGFloat iconH =iconW;
CGFloat iconX = 0;
CGFloat iconY = (self.view.bounds.size.height - iconH) * 0.5;

[UIView animateWithDuration:0.5 animations:^{
coverView.alpha = 0.6;
self.btnIcon.frame = CGRectMake(iconX, iconY, iconW, iconH);
}];

}// 点击了"半透明背景"按钮- (void)didClickCoverView:(UIButton *)sender {
// 1. 让"头像按钮"通过动画的方式回到原来的位置
[UIView animateWithDuration:0.5 animations:^{

self.btnIcon.frame = self.iconFrame;

// 2. 让"半透明背景"通过动画的方式透明度变成0, 然后从父容器中移除
self.coverView.alpha = 0.0;
} completion:^(BOOL finished) {
[self.coverView removeFromSuperview];
}];

}
// 点击了下一题按钮- (IBAction)didClickNextQuestionButton:(UIButton *)sender {
// 1. 切换题目的显示    [self nextQuestion];

}
// 点击了中间的图片按钮
- (IBAction)didClickIconButton:(UIButton *)sender {
// 根据是否已经创建了coverView, 来决定是应该放大还是缩小
if (self.coverView == nil) {
// 放大
[self didClickShowBigImageButton:nil];
} else {
// 缩小
[self didClickCoverView:self.coverView];
}

}

这样整个过程就完成了,