动画宽度约束时 UITextField 文本跳转

Question

在为文本字段的宽度约束设置动画时，我遇到了一个小故障，其中我的 UITextField 的文本跳转到其最终位置（它没有动画）。 看看这个gif：

当点击“增长”按钮时，文本字段的宽度会增长。 但是“hello world”会立即跳到中心而不是滑到那里。 当点击“缩小”按钮时，“hello world”立即跳回到左边。

我的动画功能如下所示：

func animateGrowShrinkTextFields(grow: Bool) {
    if grow {
        UIView.animate(withDuration: 0.5, animations: {
            self.widthConstraint.constant = 330
            self.view.layoutIfNeeded()
        }, completion: nil)
    } else {
        UIView.animate(withDuration: 0.5, animations: {
            self.widthConstraint.constant = 100
            self.view.layoutIfNeeded()
        }, completion: nil)
    }
}

我尝试了以下列表建议； 他们都没有工作。

1. 我在动画块之前和之内调用了self.helloWorldTextField.layoutIfNeeded() self.view.layoutIfNeeded()和self.helloWorldTextField.layoutIfNeeded() ，如本答案中所述： https : self.helloWorldTextField.layoutIfNeeded()
2. 我试图self.view.layoutSubviews和self.helloWorldTextField.layoutSubview在这个答案建议： https://stackoverflow.com/a/30845306/2179970
3. 也试过setNeedsLayout() UITextField 文本跳转 iOS 9
4. 我什至尝试按照此处的建议更改字体： https : //stackoverflow.com/a/35681037/2179970
5. 我尝试了resignFirstResponder （虽然我从来没有在我的测试中点击或编辑文本字段，所以它不应该涉及 firstResponder），如下所示： https ://stackoverflow.com/a/33334567/2179970
6. 我尝试将 UITextField 子类化，如下所示： https : //stackoverflow.com/a/40279630/2179970
7. 我也尝试使用 UILabel 并得到相同的跳跃结果。

以下问题也与我的非常相似，但还没有答案： UITextfield text position not ananiating while width constraint is animation

这是我在 Github 上的项目： https : //github.com/starkindustries/ConstraintAnimationTest

Answer 1

解决方案演示

我找到了一个有效的解决方案。 它感觉有点hackish，但它的工作原理。 这是最终结果的GIF。 请注意， helloWorldTextField具有蓝色边框，以在其后面的第二个文本字段中显示其位置。

说明

创建两个文本字段： helloWorldTextField （问题中的原始文件）和borderTextField （新文本字段）。 删除helloWorldTextFields的边框和背景颜色。 保持borderTextField的边框和背景颜色。 在borderTextField居中helloWorldTextField 。 然后设置borderTextField的宽度动画。

Github链接和代码

这是Github上的项目： https ： //github.com/starkindustries/ConstraintAnimationTest

这是MyViewController类中的代码。 其他所有内容都在故事板中设置，可以在上面的链接上在Github上查看。

class MyViewController: UIViewController {

    // Hello World TextField Border var
    @IBOutlet weak var borderTextFieldWidth: NSLayoutConstraint!

    // Button Vars
    @IBOutlet weak var myButton: UIButton!
    var grow: Bool = false

    func animateGrowShrinkTextFields(grow: Bool, duration: TimeInterval) {
        if grow {
            UIView.animate(withDuration: duration, animations: {
                self.borderTextFieldWidth.constant = 330
                self.view.layoutIfNeeded()
            }, completion: { (finished: Bool) in
                print("Grow animation complete!")
            })
        } else {
            UIView.animate(withDuration: duration, animations: {
                self.borderTextFieldWidth.constant = 115
                self.view.layoutIfNeeded()
            }, completion: { (finished: Bool) in
                print("Shrink animation complete!")
            })
        }
    }

    @IBAction func toggle(){
        let duration: TimeInterval = 1.0
        grow = !grow
        let title = grow ? "Shrink" : "Grow"
        myButton.setTitle(title, for: UIControlState.normal)
        animateGrowShrinkTextFields(grow: grow, duration: duration)
    }
}

注释和参考

让我得到这个解决方案的是@JimmyJames的评论：“你只是在动画UITextField宽度，但内部的内容不是动画。”

我研究了如何动画字体更改并遇到了这个问题： 有没有办法动画更改UILabel的textAlignment？

在那个问题中@CSmith提到“你可以为FRAME设置动画，而不是textAlignment” https://stackoverflow.com/a/19251634/2179970

该问题中接受的答案建议在另一帧内使用UILabel。 https://stackoverflow.com/a/19251735/2179970

希望这能帮助遇到此问题的其他人。 如果有人有其他办法解决这个问题，请发表评论或其他答案。 谢谢！

Answer 2

该问题的另一个解决方案是在初始化时设置yourLabel.contentMode = .center ，并yourLabel.contentMode = .center在动画块中设置动画