动画Uibutton配置更改

Question

现代 UIButton 配置 API 允许新设置按钮外观的方式。然而，下面的代码完全跳过动画。

@IBAction func buttonTouched(_ sender: UIButton) {
    sender.configuration?.background.backgroundColor = .green
    UIView.animate(withDuration: 0.4, delay: 0.5) {
        sender.configuration?.background.backgroundColor = .systemMint
    }  
}

类似的事情可以这样完成：

@IBAction func buttonTouched(_ sender: UIButton) {
    sender.backgroundColor = .red
    UIView.animate(withDuration: 0.4, delay: 0.5) {
        sender.backgroundColor = .systemMint
    }
}

这有效。问题是如何为 UIButton 的配置更改设置动画。

Answer 1

快速搜索后，它将出现configuration.background.backgroundcolor是不是 andimable。

根据您的需求，您可以使用.customview对按钮的背景使用，然后为该视图对颜色更改进行动画。

快速示例（假设您已将按钮添加为@iboutlet）：

class TestVC: UIViewController {

    @IBOutlet var button: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let v = UIView()
        v.backgroundColor = .red
        button.configuration?.background.customView = v
        
    }
    
    @IBAction func buttonTouched(_ sender: UIButton) {
        if let v = sender.configuration?.background.customView {
            UIView.animate(withDuration: 0.4, delay: 0.5) {
                v.backgroundColor = v.backgroundColor == .red ? .systemMint : .red
            }
        }
    }
}

Answer 2

通过使用过渡来实现动画配置更改的方法是迄今为止我能找到的唯一解决方法。有点像这样：

@IBAction func buttonTouched(_ sender: UIButton) {
    UIView.transition(with: sender, duration: 0.3, options: .transitionCrossDissolve) {
        sender.configuration?.background.backgroundColor = .red
    } completion: { _ in
        UIView.transition(with: sender, duration: 1.0, options: .transitionCrossDissolve) {
            sender.configuration?.background.backgroundColor = .cyan
        }
    }
}

当我尝试优化和重用代码时，我得到了类似的结果：

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Another option is subclass `UIButton` and override its `configurationUpdateHandler`
        view.subviews.compactMap({ $0 as? UIButton }).forEach {
            $0.configurationUpdateHandler = { button in
                guard let config = button.configuration else { return }
                button.setConfiguration(config,duration: 2)
            }
        }
    }

    @IBAction func buttonTouched(_ sender: UIButton) {
//        sender.configuration?.background.backgroundColor = .red
//        sender.configuration?.baseForegroundColor = .white
//        The above would work, but we should rather aggregate all changes at once.
        if var config = sender.configuration {
            config.background.backgroundColor = .red
            config.baseForegroundColor = .white
            sender.configuration = config
        }
        
    }
    
}

extension UIButton {
    func setConfiguration(_ configuration: UIButton.Configuration, duration: Double = 0.25, completion: ((Bool) -> Void)? = nil) {
        UIView.transition(with: self, duration: duration, options: .transitionCrossDissolve) {
            self.configuration? = configuration
        } completion: { completion?($0) }
    }
}
 I