服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Swift - swift3.0实现图片放大缩小动画效果

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

2021-03-29 15:42水桶前辈 Swift

这篇文章主要为大家详细介绍了swift3.0实现图片放大缩小动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一. 内容说明

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

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

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

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

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

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

二.源码展示

0. 图片测试demo源码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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:图片浏览管理类,用于展示图片

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
import foundation
import uikit
 
class ljphotoinfo: nsobject {
   
  var currentselectindex : int?
  var largeimageurlstr : string?
  var thumbimageview : uiimageview?
   
  override init() {
    super.init()
  }
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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)
    }
  }
}

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

原文链接:http://blog.csdn.net/robinson_911/article/details/77979467

延伸 · 阅读

精彩推荐
  • Swiftmac git xcrun error active developer path 错误

    mac git xcrun error active developer path 错误

    本文主要是讲诉了如何解决在mac下使用git;xcode4.6的环境时,出现了错误(mac git xcrun error active developer path)的解决办法,希望对大家有所帮助...

    Swift教程网2232020-12-16
  • Swiftswift where与匹配模式的实例详解

    swift where与匹配模式的实例详解

    这篇文章主要介绍了swift where与匹配模式的实例详解的相关资料,这里附有简单的示例代码,讲的比较清楚,需要的朋友可以参考下...

    追到梦的魔术师14382021-01-06
  • SwiftSwift中转义闭包示例详解

    Swift中转义闭包示例详解

    在Swift 中的闭包类似于结构块,并可以在任何地方调用,下面这篇文章主要给大家介绍了关于Swift中转义闭包的相关资料,需要的朋友可以参考下...

    小小小_小朋友11412021-12-26
  • SwiftSwift能代替Objective-C吗?

    Swift能代替Objective-C吗?

    这是我在网上上看到的答案,复制粘贴过来和大家分享一下,因为我和很多人一样很关心Swift的出现对Mac开发的影响和对Objective-C的影响。...

    Swift教程网4412020-12-16
  • SwiftSwift实现多个TableView侧滑与切换效果

    Swift实现多个TableView侧滑与切换效果

    这篇文章主要为大家详细介绍了Swift实现多个TableView侧滑与切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    乞力马扎罗的雪雪5822021-01-08
  • SwiftSwift使用CollectionView实现广告栏滑动效果

    Swift使用CollectionView实现广告栏滑动效果

    这篇文章主要为大家详细介绍了Swift使用CollectionView实现广告栏滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Stevin的技术博客12372021-01-13
  • SwiftSwift的74个常用内置函数介绍

    Swift的74个常用内置函数介绍

    这篇文章主要介绍了Swift的74个常用内置函数介绍,这篇文章列举出了所有的Swift库函数,内置函数是指无需引入任何模块即可以直接使用的函数,需要的朋友可...

    Swift教程网5802020-12-19
  • SwiftSwift教程之基础数据类型详解

    Swift教程之基础数据类型详解

    这篇文章主要介绍了Swift教程之基础数据类型详解,本文详细讲解了Swift中的基本数据类型和基本语法,例如常量和变量、注释、分号、整数、数值类型转换等...

    Swift教程网5162020-12-18