点击图片和头像放大是一种常见的效果,这里话不多说,现上效果图:
效果图其实这个效果实现起来很简单,先定义一个黑色的背景视图,将图片放大后的效果放在背景视图上后将背景视图隐藏,再添加点击事件和动画,点击时显示和隐藏即可,代码如下:
#import "ViewController.h"
@interface ViewController ()
//头像
@property (weak, nonatomic) IBOutlet UIImageView *headView;
//黑色背景
@property (strong , nonatomic) UIView *background;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 头像的UIImageView允许用户交互
self.headView.userInteractionEnabled = YES;
// 初始化背景视图
self.background = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
// 设置背景视图为黑色
[self.background setBackgroundColor:[UIColor blackColor]];
// 将背景视图隐藏
[self.background setAlpha:0];
// 在原始图中加入背景视图
[self.view addSubview:self.background];
// 初始化图片(放大的图片)
UIImageView *image = [[UIImageView alloc]initWithImage:self.headView.image];
// 设置图片的x,y,宽,高
CGFloat x,y,width,heigth;
// 设置x值
x = 0;
// 根据屏幕的宽度设置图片的宽
width = [UIScreen mainScreen].bounds.size.width;
// 根据屏幕的宽度及图片的比例设置图片的高
heigth = self.headView.image.size.height / self.headView.image.size.width * width;
// 设置y值
y = ([UIScreen mainScreen].bounds.size.height - heigth) / 2;
// 将设置好的x,y,宽,高赋予图片
[image setFrame:CGRectMake(x, y, width, heigth)];
// 在背景视图中加入图片
[self.background addSubview:image];
// 建立图片的点击事件
UIGestureRecognizer *tapImage = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];
[self.headView addGestureRecognizer:tapImage];
// 建立背景的点击事件
UIGestureRecognizer *tapBackground = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];
[self.background addGestureRecognizer:tapBackground];
//
}
#pragma mark 点击方法的动画
- (void)tapAction:(UIGestureRecognizer *)tap{
[UIView animateWithDuration:0.4 animations:^{
if (tap.view == self.headView) {
[self.background setAlpha:1];
}else
[self.background setAlpha:0];
}];
}
@end
SKPreviewer
SKPreviewer是小编自己封装的一个类,支持图片的点击放大,双击放大双击点,手势缩放等功能。
效果图如下:
使用方法也十分简单,导入类,添加一句代码即可。
[SKPreviewer previewFromImageView:sender.imageView container:self.view];
SKPreviewer的Demo下载地址:Demo
希望这篇文章对各位看官有所帮助
网友评论