簡要

在這篇文章中，我們將使用 Swift 的 CABasicAnimation 來實現圖片的淡入淡出效果。這是 Swift 動畫中的一個基本範例，能幫助你輕鬆切換圖片並增強使用者體驗。隨著 iOS 的更新，這些方法也在不斷演進，因此我們將提供 2025 年最新的語法與最佳實踐。

圖片淡入淡出效果示範

基本設置

首先，我們需要設置一個 UIView 作為我們的顯示區域。這裡我們創建一個邊長為 100 的正方形，並將其添加到主視圖中。

let testView = UIView()
testView.frame = CGRect(x: 200, y: 200, width: 100, height: 100)
testView.backgroundColor = UIColor.darkGray
self.view.addSubview(testView)

/* 
 這裡是 CABasicAnimation 動畫區 
 下方會講解填空
*/

CABasicAnimation

CABasicAnimation 提供了多種動畫效果，可以設定 keyPath 來決定轉換效果。以下將介紹幾種常見的動畫效果。

旋轉

// 旋轉動畫
let basicAnimation = CABasicAnimation(keyPath: "transform.rotation.y")
basicAnimation.duration = 10
basicAnimation.repeatCount = 5
basicAnimation.fromValue = 0
basicAnimation.toValue = 2 * Double.pi

Demo
旋轉動畫示範

縮放

// 縮放動畫
let basicAnimation = CABasicAnimation(keyPath: "transform.scale")
basicAnimation.duration = 10
basicAnimation.repeatCount = 5
basicAnimation.fromValue = 0
basicAnimation.toValue = 2.0

Demo
縮放動畫示範

移動

// 移動動畫
let basicAnimation = CABasicAnimation(keyPath: "position")
basicAnimation.duration = 10
basicAnimation.repeatCount = 5
basicAnimation.fromValue = CGPoint(x: 100, y: 100)
basicAnimation.toValue = CGPoint(x: 400, y: 400)

Demo
移動動畫示範

閃爍

// 閃爍動畫
let basicAnimation = CABasicAnimation(keyPath: "opacity")
basicAnimation.duration = 0.2
basicAnimation.repeatCount = 10
basicAnimation.fromValue = 1.0
basicAnimation.toValue = 0.0

Demo
閃爍動畫示範

變色

// 變色動畫
let basicAnimation = CABasicAnimation(keyPath: "backgroundColor")
basicAnimation.duration = 0.2
basicAnimation.repeatCount = 10
basicAnimation.fromValue = UIColor.red.cgColor
basicAnimation.toValue = UIColor.blue.cgColor

Demo
變色動畫示範

圖片切換

使用 CABasicAnimation 的 contents 屬性，我們可以實現圖片的淡入淡出效果。以下是使用按鈕來切換圖片的範例：

@IBAction func buttonClicked(sender: UIButton) {
    let buttonTag = sender.tag
    sender.tag += 1
    let nextImage = UIImage(named: "food" + String(buttonTag)) // 更新為新的圖片
    let basicAnimation = CABasicAnimation(keyPath: "contents")
    basicAnimation.fromValue = imageViewA.image?.cgImage
    basicAnimation.toValue = nextImage?.cgImage
    basicAnimation.duration = 1.5
    imageViewA.layer.contents = imageViewA.image?.cgImage
    imageViewA.layer.add(basicAnimation, forKey: nil)
    imageViewA.image = nextImage // 更新 UIImageView
}

Demo
圖片切換動畫示範

這個方法簡化了物件的使用，讓程式碼更為簡潔。建議大家親自試試看，體驗這些動畫效果的魅力。

完成


Swift 程式教學

Q&A（常見問題解答）

1. 如何在 Swift 中使用動畫？

使用 CABasicAnimation 是一個簡單的方式來實現動畫效果，你只需設定關鍵字路徑和動畫屬性即可。

2. 可以在動畫中添加多個效果嗎？

是的，你可以使用 CAAnimationGroup 來將多個動畫效果組合在一起，實現更複雜的動畫效果。

3. 如何調整動畫的持續時間和重複次數？

在創建動畫時，可以通過 duration 和 repeatCount 屬性來設定動畫的持續時間和重複次數。

—

Categorized in:

swift