如何将SF系统图像上的.symbolEffect（即脉冲等动画）应用到UIKit中的UIButton上？

Question

是否可以将

.symbolEffect

（即脉冲等动画）应用到 SF 系统映像到 UIKit 中的

UIButton

，即不是 SwiftUI 应用程序或插入？

（请注意，有 100 个问题解释了一般如何对图像进行动画处理，我问的是如何具体应用 symbolEffect，在 UIKit 应用程序中是否可能？ - 即不是 SwiftUI？）

Answer 1

在 UIKit 中，仅支持添加符号效果

UIImageView

和

UIBarButtonItem

。很奇怪的是它不支持

UIButton

。

这是

UIButton

的扩展，提供与

UIImageView

相同的 API：

extension UIButton {
    private var imageView: UIImageView? {
        for subview in subviews {
            if let iv = subview as? UIImageView {
                return iv
            }
        }
        return nil
    }

    func addSymbolEffect(_ effect: some IndefiniteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil) {
        imageView?.addSymbolEffect(effect, options: options, animated: animated, completion: completion)
    }

    func addSymbolEffect(_ effect: some DiscreteSymbolEffect & IndefiniteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil) {
        imageView?.addSymbolEffect(effect, options: options, animated: animated, completion: completion)
    }

    func addSymbolEffect(_ effect: some DiscreteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil) {
        imageView?.addSymbolEffect(effect, options: options, animated: animated, completion: completion)
    }

    func removeSymbolEffect(ofType effect: some IndefiniteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil) {
        imageView?.removeSymbolEffect(ofType: effect, options: options, animated: animated, completion:  completion)
    }

    func removeSymbolEffect(ofType effect: some DiscreteSymbolEffect & IndefiniteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil) {
        imageView?.removeSymbolEffect(ofType: effect, options: options, animated: animated, completion:  completion)
    }

    func removeSymbolEffect(ofType effect: some DiscreteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil) {
        imageView?.removeSymbolEffect(ofType: effect, options: options, animated: animated, completion:  completion)
    }

    func removeAllSymbolEffects(options: SymbolEffectOptions = .default, animated: Bool = true) {
        imageView?.removeAllSymbolEffects(options: options, animated: animated)
    }
}

这里有一些测试代码，您可以将其放入 Playground 中（以及上面的扩展）：

import UIKit
import PlaygroundSupport

let image = UIImage(systemName: "eye.fill")
var cfg = UIButton.Configuration.bordered()
cfg.image = image
let button = UIButton(configuration: cfg)
button.addSymbolEffect(.pulse)
PlaygroundPage.current.liveView = button

这将显示一个带有脉冲眼睛符号的按钮。