动画宽度约束时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.view.layoutIfNeeded() 和self.helloWorldTextField.layoutIfNeeded()，如以下答案所示：https://stackoverflow.com/a/32996503/2179970
2. 我尝试了self.view.layoutSubviews 和self.helloWorldTextField.layoutSubview，正如这个答案中所建议的那样：https://stackoverflow.com/a/30845306/2179970
3. 也试过setNeedsLayout()UITextField text jumps 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 animating while width constraint is animated

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

Answer 1

解决方案演示

我找到了一个可行的解决方案。感觉有点骇人听闻，但它确实有效。这是最终结果的 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 宽度设置动画，但里面的内容没有动画。”

我研究了如何为字体更改设置动画并遇到了这个问题：Is there a way to animate changing a UILabel's textAlignment?

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

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

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

Answer 2

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