Swift 动画按钮在第一次点击时跳跃

Question

我在一些按钮上设置了一些动画，当它们被按下时它们会收缩并在释放时重新长出来。

我面临的问题是，当加载视图并且第一次触摸按钮时，它们会发生跳跃（如下图所示）。再次单击时，它们的行为符合预期。

请注意，旋转的 HOLD 圆圈不是按钮，而是叠加的图像视图，确认按钮仅在此处存在问题。还要考虑到向walletViewController 的转换也没有发生，只要问题没有得到解决，它就会被停用。

@IBAction func buttonTapped(_ sender: UIButton) {
    UIView.animate(withDuration: 0.15) {
        self.badgeButton.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
        self.holdAnimateBadge.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    }
    UIView.animate(withDuration:0.15) {
        let imageView = self.holdAnimateBadge
        imageView?.alpha = 0.5
    }
}

@IBAction func buttonToWallet(_ sender: Any) {
    UIView.animate(withDuration: 0.20) {
        self.badgeButton.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
        self.badgeButton.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        self.holdAnimateBadge.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
        self.holdAnimateBadge.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
    }
    UIView.animate(withDuration:0.20) {
        let imageView = self.holdAnimateBadge
        imageView?.alpha = 1
    }
    if badgeButton.image(for: UIControlState.normal) == UIImage(named: "SellImage") {
        let walletViewController = self.storyboard?.instantiateViewController(withIdentifier: "walletViewController")
        self.navigationController?.pushViewController(walletViewController!, animated: true)
    } else if badgeButton.image(for: UIControlState.normal) == UIImage(named: "BuyImage") {
        let walletViewController = self.storyboard?.instantiateViewController(withIdentifier: "walletViewController")
        self.navigationController?.pushViewController(walletViewController!, animated: true)
    } else {
        return
    }
}

问题似乎与这个CGAffineTransform(scaleX: 1.5, y: 1.5) 动画以及两个动作同时被调用的事实有关，但我不明白为什么它只在第一次单击和第一次加载视图时发生。

Answer 1

其中一个问题如下：当您像这样制作动画时：

UIView.animate(withDuration: 0.20) {
    self.badgeButton.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
    self.badgeButton.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
}

您更改了转换矩阵两次，因此第二次分配将覆盖第一次。因此，第一个转换将被忽略。

因此，我认为您必须查看animateKeyframesWithDuration，它允许您添加多个动画（例如缩小并立即再次缩小）。