簡要

之前那篇做兩個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

完成