Question

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

当＆＃34;成长＆＃34;点击按钮，文本字段的宽度增加。但是＆＃34;你好世界＆＃34;立即跳到中心而不是在那里滑行。当＆＃34;收缩＆＃34;点击按钮，＆＃34; hello world＆＃34;立即跳回到左边。

我的动画功能如下：

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)
    }
}

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

我在动画块之前和之内调用self.view.layoutIfNeeded()和self.helloWorldTextField.layoutIfNeeded()，如此答案所示：https://stackoverflow.com/a/32996503/2179970
我按照此回答中的建议尝试了self.view.layoutSubviews和self.helloWorldTextField.layoutSubview：https://stackoverflow.com/a/30845306/2179970
还尝试了setNeedsLayout() UITextField text jumps iOS 9
我甚至尝试按照此处的建议更改字体：https://stackoverflow.com/a/35681037/2179970
我尝试了resignFirstResponder（尽管我从未在我的测试中点击或编辑文本字段，因此它不应该涉及firstResponder），如下所示：https://stackoverflow.com/a/33334567/2179970
我尝试了UITextField的子类化，如下所示：https://stackoverflow.com/a/40279630/2179970
我也试过使用UILabel并得到了相同的结果。

以下问题也与我的非常相似，但尚无答案：UITextfield text position not animating while width constraint is animated

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

Answer 1

解决方案演示

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

<强>说明

制作两个文本字段：helloWorldTextField（问题中的原文）和borderTextField（新文本字段）。删除helloWorldTextFields的边框和背景颜色。保留borderTextField的边框和背景颜色。 helloWorldTextField内的中心borderTextField。然后设置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的评论：＆＃34;你只是设置了UITextField宽度的动画，但里面的内容没有动画。＆＃34;

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

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

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

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

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

1 个答案: