带有 Lottie 动画的动态按钮

Posted 2023-03-21

【中文标题】带有 Lottie 动画的动态按钮

【英文标题】：Dynamic Button with Lottie animation

【发布时间】：2020-03-14 13:07:45

【问题描述】：

我有一个简单的UIButton 和一个title：

let signUpButton: CustomButton = 
    let v = CustomButton(type: .system)
    v.translatesAutoresizingMaskIntoConstraints = false
    v.setTitle("Registrieren", for: .normal)
    v.titleLabel?.font = UIFont(name: "AvenirNext-DemiBold", size: 15)
    v.titleLabel?.textColor = .white
    v.setTitleColor(.white, for: .normal)
    v.backgroundColor = UIColor.darkGray
    v.layer.cornerRadius = 3
    v.addTarget(self, action: #selector(signUpButtonTapped(_:)), for: .touchUpInside)
    return v
()

现在我的目标是，当点击按钮时，title 消失，button 不再可点击，loading-animation (Lottie) 应显示。 点击后有两个选项：

一切都很好，正在检索数据，我present另一个ViewController 出现一些错误，loading-animation 消失，title 再次显示

到目前为止，这是我的buttonTapped-函数（为简单起见，函数不完整）：

@objc func signUpButtonTapped(_ sender: Any) 

    let logoAnimation = AnimationView(name: "LoadingAnimation")
    logoAnimation.contentMode = .scaleAspectFit
    logoAnimation.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(logoAnimation)

    logoAnimation.centerXAnchor.constraint(equalTo: signUpButton.centerXAnchor).isActive = true
    logoAnimation.centerYAnchor.constraint(equalTo: signUpButton.centerYAnchor).isActive = true
    logoAnimation.heightAnchor.constraint(equalToConstant: 50).isActive = true
    logoAnimation.widthAnchor.constraint(equalToConstant: 50).isActive = true
    logoAnimation.loopMode = .loop
    logoAnimation.play()

    if error!= nil 
      logoAnimation.stop()
      logoAnimation.removeFromSuperView()
     else 
          /* present new VC */ 
    

现在，实际的问题是，如何使title 出现/消失，我该怎么做才能使button 在“加载”时不可点击？

我想过创建一个与按钮大小/颜色完全相同的UIView，并将其放在button 的顶部，但这似乎不是很干净和智能..

有没有快速简便的方法来完成这项工作？ 感谢每一个帮助:) 如果您需要更多详细信息，请告诉我。

【问题讨论】：

根据约束不在按钮上方logoAnimation

是的。但是故意的？我希望它显示出来。或者你是什么意思？

【参考方案1】：

你可以这样做来隐藏按钮

btn.setTitle("", for: .normal)

或

btn.isHidden = true

【讨论】：

好吧，这比我想象的要容易得多...setTitle 工作完美。谢谢！