点击图片进行放大,再次点击就缩小到原来的地方

首先写一个类  写放大缩小的方法

//
//  BigImage.h
//  TapImageBigAndSmall
//
//  Created by lxy on 15-4-7.
//  Copyright (c) 2015年 Shenzhen MSD Technology Co.,LTD. All rights reserved.
//

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

@interface BigImage : NSObject

+(void)showImage:(UIImageView *)avatarImageView;
+(void)hideImage:(UITapGestureRecognizer*)tap;
@end

实现方法

//
//  BigImage.m
//  TapImageBigAndSmall
//
//  Created by lxy on 15-4-7.
//  Copyright (c) 2015年 Shenzhen MSD Technology Co.,LTD. All rights reserved.
//

#import "BigImage.h"

@implementation BigImage

static CGRect oldframe;

+(void)showImage:(UIImageView *)avatarImageView
{
    UIImage *image = avatarImageView.image;
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    UIView *backgroundView = [[UIView alloc]initWithFrame:CGRectMake( 0,  0,  [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    oldframe = [avatarImageView convertRect:avatarImageView.bounds toView:window];
    backgroundView.backgroundColor = [UIColor blackColor];
    backgroundView.alpha = 0;
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:oldframe];
    imageView.image = image;
    imageView.tag = 1;
    [backgroundView addSubview:imageView];
    [window addSubview:backgroundView];

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(hideImage:)];
    [backgroundView addGestureRecognizer: tap];

    [UIView animateWithDuration:0.3 animations:^{
        imageView.frame=CGRectMake(0,([UIScreen mainScreen].bounds.size.height-image.size.height*[UIScreen mainScreen].bounds.size.width/image.size.width)/2, [UIScreen mainScreen].bounds.size.width, image.size.height*[UIScreen mainScreen].bounds.size.width/image.size.width);
        backgroundView.alpha = 1;
    } completion:^(BOOL finished) {

    }];

}

+(void)hideImage:(UITapGestureRecognizer*)tap
{
    UIView *backgroundView = tap.view;
    UIImageView *imageView = (UIImageView*)[tap.view viewWithTag:1];
    [UIView animateWithDuration:0.3 animations:^{
        imageView.frame = oldframe;
        backgroundView.alpha = 0;
    } completion:^(BOOL finished) {
        [backgroundView removeFromSuperview];
    }];

}
@end

在视图控制器中

//
//  ViewController.m
//  TapImageBigAndSmall
//
//  Created by lxy on 15-4-7.
//  Copyright (c) 2015年 Shenzhen MSD Technology Co.,LTD. All rights reserved.
//

#import "ViewController.h"
#import "BigImage.h"

@interface ViewController ()
@property (nonatomic,strong)UIImageView *image;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor magentaColor];
    self.image = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    _image.image = [UIImage imageNamed:@"me"];
    _image.userInteractionEnabled = YES;
    [self.view addSubview:_image];

    /**
     * 给图片添加手势  点击可放大图片
     */
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapClick)];
    [self.image addGestureRecognizer:tap];

    /**
     * 一张图片围绕着一个圆转圈
     */
//     [self AnimationStart];

}
- (void)tapClick
{
    [BigImage showImage:_image];

}
- (void)AnimationStart
{
    UIImage *image=[UIImage imageNamed:@"me"];
    CALayer *flyStarLayer=[CALayer layer];
    flyStarLayer.bounds=CGRectMake(0, 0, 20, 20);
    flyStarLayer.contents=(id)image.CGImage;
    [self.view.layer addSublayer:flyStarLayer];

    CAKeyframeAnimation *keyAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyAnimation.duration=5.0;
    keyAnimation.removedOnCompletion=NO;
    //    NSNumber *number1=[NSNumber numberWithFloat:0.0];
    //    NSNumber *number2=[NSNumber numberWithFloat:0.2];
    //    NSNumber *number3=[NSNumber numberWithFloat:0.8];
    //    keyAnimation.keyTimes=[NSArray arrayWithObjects:number1,number2,number3, nil];
    keyAnimation.fillMode=kCAFillModeForwards;
    keyAnimation.repeatCount=1;

    CGMutablePathRef circlePath=CGPathCreateMutable();

    CGPathAddArc(circlePath, nil, 100, 150, 50, 0, 4*M_PI, 0);
    keyAnimation.path=circlePath;
    CGPathRelease(circlePath);
    [flyStarLayer addAnimation:keyAnimation forKey:nil];

}
时间: 2024-10-07 20:41:25

点击图片进行放大,再次点击就缩小到原来的地方的相关文章

iOS 图片点击放大, 再次点击缩小

XWScanImage  是一个自定义的类, 评论留Q 发 ImageView = [[UIImageView alloc]init]; ImageView.backgroundColor = SetColor(160, 160, 160); //为UIImageView1添加点击事件 UITapGestureRecognizer *tapGestureRecognizer1 = [[UITapGestureRecognizer alloc] initWithTarget:self action

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

如何实现"查看大图"功能. ** 点击"图片"按钮, 显示大图 需求分析: 问:&1.点击图片之后就放大图片的功能的步骤是什么? 1>创建一个和屏幕一样大小的半透明UIView, 用来遮盖整个界面 2>需要把“图片按钮”, 放置在coverView的前面 3>将图片按钮放大 4>将这些操作放在block动画当中. 问:&2.黑色半透明的背景图片是一个什么控件?点击灰色背景后需要做哪些操作? 解析:是一个按钮,因为需要监听点击事

列表点击当前伸开再次点击收起,点击当前伸开后点击别的列表,别的列表伸开,其余的收起

$(function() { $('section').click(function(){ // 点击当前展开再次点击收起 if($(this).attr('isclick') == 'yes'){ $(this).find('div').css('display','none'); $('section').removeAttr('isclick'); return; } // 点击当前展开别的收起 $('section').find('div').css('display','none');

jQuery实现点击图片简单放大效果

一.HTML代码如下: <img class="comment_pics" width="50px" height="50px" src="img/01.jpg"/> <div class="bg"> <img class="bgImg" style="max-width: 100%; max-height: 100%; position: fix

高仿新浪点击图片放大(可以拖动,动态缩小放大,以及再次点击图片消失和保存图片的功能)

有图有真相: 最近在做项目的时候用到了点击图片放大效果,于是就开始实现,本以为挺简单的,实现起来还是遇到不少的小问题啊: 第一:只实现点击图片放大,再次点击消失,这个好实现: 第二:只实现图片可以拖动,而且可以动态缩小放大,这个也好实现: 第三:第一 和第二同步实现就出现问题了: 具体的问题是: (1)setOnClickListener 和 setOnTouchListener 同时设置的时候,若是setOnTouchListener的返回值为true,则不会再执行setOnClickList

点击图片放大至原始图片大小

有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w = parseInt($(window).width());//获取浏览器的宽度 $("#abc img").each(function(i){     var img = this;     var realWidth;//真实的宽度     var realHeight;//真实的高度     $("<img

jQuery实现的点击图片放大且在当前页面查看原图

jquery在当前页面查看原图,单击图片,显示出大图片,再次单击图片,恢复网页原有状态.不刷新页面的情况下查看原图,在网上类似的应用有很多.有时候朋友们说这是无刷新放大图片的功能,其实也就那么一回事吧,不过从本款代码来看,这功能实现起来并不太复杂,引入了jQuery,代码分享给大家. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

点击图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>点击图片放大</title> <style type="text/css"> a img{border:0px;} .latentzoom { CURSOR: pointer; outline: none } .latentzoom-image { BORDER

js+jquery+html实现在三种不通的情况下,点击图片放大的效果

js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7