iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
Mobile Development

iOS APP 使用Swift打造一個外送平台APP (以foodpanda、Uber Eats為例) 系列 第 26

[Day 25] Swift UIImageView 淡入淡出 切換圖片效果 幻燈片 (三)

  • 分享至 

  • xImage
  •  

簡要

之前那篇做兩個View的動畫
也就是UIView.animate

[Day 22] Swift UIImageView 淡入淡出 切換圖片效果 幻燈片 (一)

高階工程師跟我提醒
其實還可以使用UIView.transition來實作效果
那就來看怎麼寫吧 GoGoGo

基本設置

這邊我們也需要兩個UIImageView
以及一個UIButton

宣告

 let imageView1 = UIImageView(image: UIImage(named: "food1"))
 let imageView2 = UIImageView(image: UIImage(named: "food3"))
 let button = UIButton(type: .system)
 var flag = 0

viewDidLoad

imageView1, imageView2 使用forEach做新增
contentMode都用scaleAspectFill讓他自適應放大
並且利用masksToBounds遮罩多餘的圖片
button就基本設置就行

override func viewDidLoad() {
    super.viewDidLoad()
    imageView2.isHidden = true
    [imageView1, imageView2].forEach {
        $0.contentMode = .scaleAspectFill
        $0.layer.masksToBounds = true
        $0.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.width)
        view.addSubview($0)
    }
    view.addSubview(button)
           button.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.width)
           button.setTitle("", for: .normal)
           button.addTarget(self, action: #selector(buttonClicked), for: .touchUpInside)
}

button target

這裡使用flag+1來區分兩組圖片
並且使用 flag % 2來分辨基數偶數
圖片轉換部分使用UIView.transition
options使用的兩個特效為

  • showHideTransitionViews
  • transitionCrossDissolve

然後設定轉換時間duration

@IBAction func buttonClicked(sender: UIButton) {
    let isOne = flag % 2 == 0
    let currentView = isOne ? imageView1 : imageView2
    let toView = isOne ? imageView2 : imageView1
    flag += 1
    UIView.transition(from: currentView, to: toView, duration: 0.4, options: [ .showHideTransitionViews, .transitionCrossDissolve], completion: nil)
}

Demo

完成


上一篇
[Day 24] Swift UIImage繼承實現ControllerView 圖片漸變效果
下一篇
[Day 26] Swift UISegmentedControl + UIPageViewController 左右滑動切換ViewController
系列文
iOS APP 使用Swift打造一個外送平台APP (以foodpanda、Uber Eats為例) 31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言