“`html

2025 最新 Swift 動畫教學：平移、旋轉、翻轉、漸變顏色與淡出效果

簡介

Swift 動畫的設定非常直觀，主要是透過改變視圖屬性來實現動畫效果，而 UIKit 會自動處理動畫過程。這篇文章將介紹幾種常用的動畫效果，包括平移、旋轉、水平翻轉、漸變顏色和淡出效果，並提供最新的語法與最佳實踐。

Swift 動畫 Animatable 屬性

在 Swift 中，以下屬性可以被標註為 Animatable，並可用於製作動畫效果：
– `frame`：視圖的位置與尺寸。
– `bounds`：視圖的尺寸。
– `center`：視圖的位置。
– `alpha`：視圖的透明度。
– `backgroundColor`：視圖的背景顏色。
– `transform`：平移、縮放或旋轉視圖。
– `contentStretch`：拉伸視圖的某部分。

Swift 動畫平移

/*** 平移 */
@objc func moveButtonPress(sender: UIButton) {
    sender.isSelected.toggle()
    let targetFrame = sender.isSelected ? CGRect(x: 220, y: 100, width: 100, height: 100) : CGRect(x: 20, y: 100, width: 100, height: 100)
    UIView.animate(withDuration: 0.3) {
        self.doughnutImageView.frame = targetFrame
    }
}

平移動畫效果

Swift 動畫放大縮小

/*** 放大縮小 */
@objc func sizeButtonPress(sender: UIButton) {
    sender.isSelected.toggle()
    let scale = sender.isSelected ? 1.2 : 1.0
    UIView.animate(withDuration: 0.3) {
        self.doughnutImageView.transform = CGAffineTransform(scaleX: scale, y: scale)
    }
}

放大縮小動畫效果

Swift 動畫淡入淡出

/*** 隱藏淡入淡出 */
@objc func alphaButtonPress(sender: UIButton) {
    sender.isSelected.toggle()
    let targetAlpha: CGFloat = sender.isSelected ? 0.0 : 1.0
    UIView.animate(withDuration: 0.3, delay: 0.2, options: .curveEaseIn) {
        self.doughnutImageView.alpha = targetAlpha
    } completion: { _ in
        print("Animation BackgroundColor Complete")
    }
}

淡入淡出動畫效果

Swift 動畫背景顏色漸變

/*** 背景顏色漸變 */
@objc func backgroundColorButtonPress(sender: UIButton) {
    sender.isSelected.toggle()
    let bgColor = sender.isSelected ? UIColor.darkGray : UIColor.red
    UIView.animate(withDuration: 0.3, delay: 0.2, options: .curveEaseIn) {
        self.doughnutImageView.backgroundColor = bgColor
    }
}

背景顏色漸變動畫效果

Swift 動畫水平翻轉

/*** 水平翻轉 */
@objc func transformButtonPress(sender: UIButton) {
    sender.isSelected.toggle()
    let transform = sender.isSelected ? CGAffineTransform(scaleX: -1, y: 1) : CGAffineTransform(scaleX: 1, y: 1)
    UIView.animate(withDuration: 0.3, delay: 0.2, options: .curveEaseIn) {
        self.doughnutImageView.transform = transform
    }
}

水平翻轉動畫效果

Swift 動畫旋轉

/*** 旋轉 */
@objc func rotationAngleButtonPress(sender: UIButton) {
    sender.isSelected.toggle()
    let angle: CGFloat = sender.isSelected ? CGFloat.pi / 180 : CGFloat.pi / 30
    UIView.animate(withDuration: 0.3, delay: 0.2, options: .curveEaseIn) {
        self.doughnutImageView.transform = CGAffineTransform(rotationAngle: angle * 45)
    }
}

旋轉動畫效果

Swift 動畫 GitHub 連結

GitHub 連結:
https://github.com/Bgihe/CowAnimationsExample

常見問題解答 (Q&A)

1. 如何在 Swift 中添加動畫效果？

在 Swift 中，可以透過 UIView 的 animate 方法來添加動畫效果，並指定所需的動畫屬性變化。

2. 動畫的持續時間可以調整嗎？

是的，動畫的持續時間可以在 animate 方法中指定，通過調整 withDuration 的參數來控制。

3. 有什麼方法可以提高動畫的性能？

使用 UIViewPropertyAnimator 和 CADisplayLink 來實現更高效的動畫性能，特別是在需要多次更新視圖時。

“`
—

Categorized in:

swift

Tagged in:

,