swift3.0实现图片放大缩小动画效果

一. 内容说明

跟我之前这篇类似,只不过那篇是OC版本,这篇是Swift版本 OC版本链接地址

目的:通过kingfisher请求5张图片,展示出来。然后利用图片放大缩小管理类展示图片,多张图片可以滑动浏览

效果图如下,想看动态的效果图,请看上面链接中的OC版本效果图,跟这篇是一样的。

本demo,只加载本地图片的demo下载链接 ,需要加载网络图片的,需要下载Kingfisher

二.源码展示

0. 图片测试demo源码

import Foundation
import UIKit 

class LJPhotoGroupViewController : TFBaseViewController{ 

  lazy var ljArray : [LJPhotoInfo] = [LJPhotoInfo]()
  let ljUrlArray = ["http://pica.nipic.com/2007-12-12/20071212235955316_2.jpg",
           "http://d.lanrentuku.com/down/png/1706/10avatars-material-pngs/avatars-material-man-4.png",
           "http://image.nationalgeographic.com.cn/2017/0703/20170703042329843.jpg",
           "http://image.nationalgeographic.com.cn/2015/0121/20150121033625957.jpg",
           "http://image.nationalgeographic.com.cn/2017/0702/20170702124619643.jpg"] 

  override func viewDidLoad() {
    super.viewDidLoad() 

    self.setTopNavBarTitle("图片浏览测试Demo")
    self.setTopNavBackButton()
    self.setUI()
  }
} 

extension LJPhotoGroupViewController{
  func setUI(){ 

    for index in 0...4{ 

      //1.加载本地图片
      //let image = UIImage.init(named: "\(index + 1).jpg")
      let showImageView = UIImageView.init()
      //showImageView.image = image
      showImageView.tag = index
      showImageView.frame = CGRect(x: Int((AppWidth - 200)/2.0), y: 80 + Int(90 * index), width: 200, height: 80)
      showImageView.isUserInteractionEnabled = true
      view.addSubview(showImageView) 

      //2.加载本地图片
      let url = URL(string:ljUrlArray[index])
      showImageView.kf.setImage(with: url) 

      let gestrue = UITapGestureRecognizer.init(target: self, action: #selector(LJPhotoGroupViewController.showClicked(_:)))
      showImageView.addGestureRecognizer(gestrue) 

      //需要浏览的图片添加到数组
      let info = LJPhotoInfo.init()
      info.largeImageURLStr = ljUrlArray[index]
      info.thumbImageview = showImageView
      info.currentSelectIndex = index
      self.ljArray.append(info)
    }
  }
} 

extension LJPhotoGroupViewController{ 

  func showClicked(_ sender : UITapGestureRecognizer){
    if self.ljArray.count > 0 {
      let index = sender.view?.tag
      let photoGroupView = LJPhotoGroupView.init(frame: CGRect(x: 0, y: 0, width: AppWidth, height: AppHeight))
      photoGroupView.setData(self.ljArray, selectedIndex: index!)
      photoGroupView.showPhotoView() 

      CHDebugLog("-------\(String(describing: index))")
    }
  }
}

1. LJPhotoGroupView:图片浏览管理类,用于展示图片

import Foundation
import UIKit 

class LJPhotoGroupView: UIView { 

  let baseIndex = 1000 

  var originFrame : CGRect? // 图片的源尺寸
  var currentIndex : NSInteger = 0 //当前选中的图片index
  var ljPhotoArray : [Any] = [Any]()//存储多组需要加载的图片原始信息 

  lazy var ljScrollView : UIScrollView = {
    let view = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: AppWidth, height: AppHeight))
    view.delegate = self
    view.isPagingEnabled = true
    view.backgroundColor = UIColor.yellow
    return view
  }() 

  override init(frame: CGRect) {
    super.init(frame: frame)
    self.addSubview(self.ljScrollView)
  } 

  func setData(_ photoArray : Array<Any>, selectedIndex : NSInteger) {
    self.ljScrollView.contentSize = CGSize(width: floor(AppWidth) * CGFloat(photoArray.count), height: AppHeight)
    self.currentIndex = selectedIndex
    self.ljPhotoArray = photoArray
  } 

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
} 

extension LJPhotoGroupView { 

// MARK: -- 图片cell复用
  func dequeueReusableCell() -> LJPhotoView { 

    var cell = self.viewWithTag(baseIndex + self.currentIndex) as? LJPhotoView 

    if ljPhotoArray.count > currentIndex {
      let info = ljPhotoArray[currentIndex] as? LJPhotoInfo
      let tempImageView = info?.thumbImageview 

      if cell != nil{
        self.originFrame = tempImageView?.convert((tempImageView?.bounds)!, to: self)
        return cell!
      } 

      cell = LJPhotoView.init(frame: CGRect(x: floor(AppWidth)*CGFloat(currentIndex), y: 0, width: AppWidth, height: AppHeight))
      self.originFrame = tempImageView?.convert((tempImageView?.bounds)!, to: self)
    }
    return cell!
  } 

// MARK: -- 展示图片
  func showPhotoView(){ 

    UIApplication.shared.keyWindow?.rootViewController?.view.addSubview(self)
    self.backgroundColor = UIColor.black 

    let cell1 = self.dequeueReusableCell()
    cell1.tag = self.baseIndex + self.currentIndex 

    var ljTempImage : UIImage?
    if ljPhotoArray.count > currentIndex {
      let info = ljPhotoArray[currentIndex] as? LJPhotoInfo
      ljTempImage = info?.thumbImageview?.image
    } 

    ljTempImage = (ljTempImage != nil) ? ljTempImage : UIImage.init(named: "pic_broadcast_gray_square") 

    let tfImageView = UIImageView.init(image: ljTempImage)
    tfImageView.frame = self.originFrame ?? CGRect.zero
    tfImageView.clipsToBounds = true
    tfImageView.backgroundColor = UIColor.red
    tfImageView.contentMode = .scaleAspectFit
    self.addSubview(tfImageView) 

    //添加页面消失的手势
    let tap = UITapGestureRecognizer.init(target: self, action: #selector(hideImageView))
    self.addGestureRecognizer(tap) 

    UIView.animate(withDuration: 0.25, animations: {
      let y : CGFloat? = (AppHeight - (ljTempImage?.size.height)! * AppWidth / (ljTempImage?.size.width)!)/2.0
      let height : CGFloat? = (ljTempImage?.size.height)! * AppWidth / (ljTempImage?.size.width)!
      tfImageView.frame = CGRect(x: 0, y: y!, width: AppWidth, height: height!)
    }) { (finish) in
      //根据选中第几张图片直接展示出来
      let cell = self.dequeueReusableCell()
      cell.tag = self.baseIndex + self.currentIndex
      cell.backgroundColor = UIColor.gray 

      if self.ljPhotoArray.count > self.currentIndex{
        cell.setCurrentImageview(self.ljPhotoArray[self.currentIndex] as! LJPhotoInfo)
      }
      let x : CGFloat = CGFloat(self.currentIndex) * floor(AppWidth);
      self.ljScrollView.setContentOffset(CGPoint.init(x: x, y: 0), animated: false)
      self.ljScrollView.addSubview(cell) 

      tfImageView.removeFromSuperview()
    }
  } 

// MARK: -- 移除图片
  func hideImageView(){
    let cell = self.viewWithTag(baseIndex + currentIndex) as? LJPhotoView
    UIView.animate(withDuration: 0.25, animations: {
      cell?.ljImageView.frame = self.originFrame!
    }) { (finish) in
      self.backgroundColor = UIColor.white
      self.removeFromSuperview()
    }
  }
} 

extension LJPhotoGroupView : UIScrollViewDelegate{ 

  func scrollViewDidScroll(_ scrollView: UIScrollView) {
    //滑动时,会调用多次
  } 

  func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
   //滑动完毕时,只会调用一次
    let page = self.ljScrollView.contentOffset.x / self.frame.size.width;
    self.currentIndex = NSInteger(page);
    print("scrollViewDidEndDecelerating当前页数----\(page)") 

    let cell = self.dequeueReusableCell()
    cell.tag = self.baseIndex + Int(page)
    if self.ljPhotoArray.count > self.currentIndex{
      cell.setCurrentImageview(self.ljPhotoArray[self.currentIndex] as! LJPhotoInfo)
    }
    self.ljScrollView.addSubview(cell)
  }
}

2. LJPhotoInfo:图片信息的model

import Foundation
import UIKit 

class LJPhotoInfo: NSObject { 

  var currentSelectIndex : Int?
  var largeImageURLStr : String?
  var thumbImageview : UIImageView? 

  override init() {
    super.init()
  }
}

3.LJPhotoView:图片浏览管理类用到的cell(图片显示)

import Foundation
import UIKit 

class LJPhotoView: UIScrollView { 

  var ljInfo : LJPhotoInfo? 

  lazy var ljImageView : UIImageView = {
      let view = UIImageView()
      view.clipsToBounds = true
      view.contentMode = .scaleAspectFit
      return view
    }() 

  override init(frame: CGRect) {
    super.init(frame: frame)
    self.zoomScale = 1.0
    self.addSubview(self.ljImageView)
  } 

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
} 

extension LJPhotoView{
  func setCurrentImageview(_ info : LJPhotoInfo){
    self.ljInfo = info
    if self.ljInfo?.thumbImageview?.image == nil{
      self.ljInfo?.thumbImageview?.image = UIImage.init(named: "pic_broadcast_gray_square")
    } 

    //无url,则通过thumbImageview获取Image展示
    //self.ljImageview.image = info.thumbImageview.image;
    let y : CGFloat? = (AppHeight - (info.thumbImageview?.image?.size.height)! * AppWidth / (info.thumbImageview?.image?.size.width)!) * 0.5;
    self.ljImageView.frame = CGRect(x: 0, y: y!, width: AppWidth, height: AppWidth*(info.thumbImageview?.image?.size.height)!/(info.thumbImageview?.image?.size.width)!)
    self.ljImageView.image = self.ljInfo?.thumbImageview?.image 

    if info.largeImageURLStr != "" {
      let url = URL(string:info.largeImageURLStr!)
      self.ljImageView.kf.setImage(with: url)
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Swift 利用Opration和OprationQueue来下载网络图片

    详解Swift 利用Opration和OprationQueue来下载网络图片 1. 基于Opration封装的获取网络数据组件 import Foundation import UIKit public typealias OpreationClosure = ((_ data:Data? , _ error: Error?) -> Void) class LJOpreationManager: Operation { /** * 下载用的url */ public var imageUrl

  • swift3.0实现图片放大缩小动画效果

    一. 内容说明 跟我之前这篇类似,只不过那篇是OC版本,这篇是Swift版本 OC版本链接地址 目的:通过kingfisher请求5张图片,展示出来.然后利用图片放大缩小管理类展示图片,多张图片可以滑动浏览 效果图如下,想看动态的效果图,请看上面链接中的OC版本效果图,跟这篇是一样的. 本demo,只加载本地图片的demo下载链接 ,需要加载网络图片的,需要下载Kingfisher 二.源码展示 0. 图片测试demo源码 import Foundation import UIKit class

  • 原生js实现图片放大缩小计时器效果

    知识要点 var fn=setInterval(function(){},1000) 每隔1秒执行一次函数 clearInterval(fn) 清除计时器 判断当图片放大缩小到固定大小时,清除计时器 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • CSS+jQuery实现的一个放大缩小动画效果

    今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title> <meta name="Generator" content="EditPlus

  • 一个CSS+jQuery实现的放大缩小动画效果

    今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 功能 : 在上方的按钮上滑动,可以切换各个page,点击下方的各个page,也可以切换收缩还是展开状态.  初始效果预览 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title&g

  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //

  • JS实现图片放大缩小的方法

    本文实例讲述了JS实现图片放大缩小的方法.分享给大家供大家参考,具体如下: 最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来.我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试):第二种方法只能兼容IE. 第一种方法很简单,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inhe

  • javascript 图片放大缩小功能实现代码

    看JS源码: 复制代码 代码如下: // 放大缩小控制 var PhotoSize = { zoom: 0, // 缩放率 count: 0, // 缩放次数 cpu: 0, // 当前缩放倍数值 elem: "", // 图片节点 photoWidth: 0, // 图片初始宽度记录 photoHeight: 0, // 图片初始高度记录 init: function(){ this.elem = document.getElementById("focusphoto&qu

  • jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

    本文实例讲述了jQuery实现的给图片点赞+1动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

  • js实现图片放大缩小功能后进行复杂排序的方法

    这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动. 首先来看下最终的效果图: 有人可能看到这个会觉得,这有什么难的,这么简单的事,楼主是不是太小提大作了?当你真正去尝试时,你才知道到底有什么难点. 首先,我们来讲下需求: 1.图片分为大小和小图,大图占四个小图的位置, 2.点击图片放大缩小, 重新排列顺序, 3. 当点击偶数列(2,4)时,它前面的那项将向提出来向后面排列 4.第一个项不能动,点第二个是将占第三四的位置,从后面取第一个小

  • Android中imageView图片放大缩小及旋转功能示例代码

    一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCenter" android:scaleType="fitCenter" 第二步:获取屏幕的宽度 DisplayMetrics dm=new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); dm.widthPixels 第三

随机推荐