簡要
在本篇文章中，我們將學習如何使用 Swift 實現圖片的淡入淡出效果，讓圖片切換更加流暢與美觀。這個效果在許多應用中都非常實用，特別是在像 Uber Eats 這樣的服務中，圖片的展示會影響用戶的選擇與體驗。
圖片幻燈片
實現圖片的淡入淡出效果，我們可以使用 UIImageView 來顯示圖片。首先，我們需要將一組圖片放入一個 Array 中，然後設置切換的時間和模式。以下是示範程式碼：
“`swift
let imageView = UIImageView()
imageView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
imageView.backgroundColor = UIColor.black
let images = [
UIImage(named: “food1”),
UIImage(named: “food2”),
UIImage(named: “food3”),
UIImage(named: “food4”),
UIImage(named: “food5”),
UIImage(named: “food6”)
].compactMap { $0 } // 使用 compactMap 避免為 nil 的圖片
let animatedImage = UIImage.animatedImage(with: images, duration: 3)
imageView.image = animatedImage
imageView.contentMode = .scaleAspectFit
“`
淡入淡出動畫
在開發中，當我們需要在 API 資料回傳前顯示一個透明的圖片時，通常會先將其透明度設為 0，待資料回傳後，使用動畫來淡入圖片。這裡是相關程式碼：
“`swift
sender.alpha = 0.0
UIView.animate(withDuration: 1.5, animations: {
sender.alpha = 1.0
})
“`
切換圖片
我們可以使用兩個 UIImageView 來實現更流暢的切換效果。以下是完整的實作流程：
1. **新增物件**：初始化兩個圖片視圖，imageViewA 和 imageViewB。
“`swift
let imageViewA = UIImageView()
let imageViewB = UIImageView()
imageViewA.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
imageViewA.contentMode = .scaleAspectFill
imageViewA.layer.masksToBounds = true
self.view.addSubview(imageViewA)
imageViewB.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
imageViewB.contentMode = .scaleAspectFill
imageViewB.layer.masksToBounds = true
self.view.addSubview(imageViewB)
“`
2. **點擊事件**：在按鈕點擊時切換圖片，並使用動畫來達成淡入淡出的效果。
“`swift
@IBAction func buttonClicked(sender: UIButton) {
let buttonTag = sender.tag
sender.tag = sender.tag + 1
imageViewB.image = UIImage(named: “food” + String(buttonTag))
imageViewB.alpha = 0.0
UIView.animate(withDuration: 0.5, animations: {
self.imageViewB.alpha = 1.0
}, completion: { _ in
self.imageViewB.alpha = 0.0
self.imageViewA.image = self.imageViewB.image
})
}
“`
增加遮罩與文字標籤
接下來，我們可以為圖片上方添加一個顏色遮罩及文字標籤。這不僅增加了視覺效果，還能提升用戶體驗。
“`swift
let maskView = UIView()
maskView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
maskView.backgroundColor = UIColor.black.withAlphaComponent(0.5)
self.view.addSubview(maskView)
let titleLabel = UILabel()
titleLabel.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 50)
titleLabel.textColor = .white
titleLabel.textAlignment = .center
titleLabel.font = UIFont.systemFont(ofSize: 30)
self.view.addSubview(titleLabel)
“`
在按鈕點擊事件中，我們也會更新標題文字：
“`swift
titleLabel.text = “food” + String(buttonTag)
“`
結論
透過上述的實作方式，我們可以實現一個流暢且美觀的圖片切換效果，增強用戶的視覺體驗。接下來，您可以根據這些基礎知識進行更多的擴展與應用。
Q&A（常見問題解答）
**Q1: 如何解決圖片無法顯示的問題？**
A1: 確認圖片名稱是否正確，並檢查圖片是否已正確加入專案中。
**Q2: 如何調整動畫的持續時間？**
A2: 您可以在動畫的 withDuration 參數中設定所需的持續時間，例如將其設為 1.0 代表 1 秒。
**Q3: 可以使用不同的圖片切換效果嗎？**
A3: 是的，您可以探索其他動畫效果，例如縮放或旋轉，來替代淡入淡出的效果。
—