UITextField-Text springt beim Animieren der Breiteneinschränkung

Question

Ich habe einen Fehler, bei dem der Text meines UITextFields an seine endgültige Position springt (er animiert nicht), wenn die Breitenbeschränkung des Textfelds animiert wird. Werfen Sie einen Blick auf dieses gif:

Wenn das „Wachsen“ Taste abgegriffen wird, wächst das Textfeld der Breite. Aber "Hallo Welt" springt sofort in die Mitte, anstatt dort zu gleiten. Wenn der "Shrink" -Button angetippt wird, springt "Hallo Welt" sofort wieder nach links.

Meine Animation Funktion sieht wie folgt aus:

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

ich folgende Liste Vorschläge versucht haben; keiner von ihnen hat funktioniert.

1. rief ich self.view.layoutIfNeeded() und self.helloWorldTextField.layoutIfNeeded() vor und innerhalb des Blocks Animation wie in dieser Antwort vorgeschlagen: https://stackoverflow.com/a/32996503/2179970
2. Ich versuchte self.view.layoutSubviews und self.helloWorldTextField.layoutSubview wie in dieser Antwort vorgeschlagen: https://stackoverflow.com/a/30845306/2179970
3. Auch setNeedsLayout() versucht UITextField text jumps iOS 9
4. I sogar versucht, die Schriftart zu ändern, wie hier vorgeschlagen: https://stackoverflow.com/a/35681037/2179970
5. Ich versuchte resignFirstResponder (obwohl, obwohl ich nie tippen oder das Textfeld in meinen Tests bearbeiten, so sollte es nicht die firstResponder beinhalten), wie hier vorgeschlagen: https://stackoverflow.com/a/33334567/2179970
6. I UITextField versucht Subklassen wie hier zu sehen: https://stackoverflow.com/a/40279630/2179970
7. Ich habe auch versucht eine UILabel mit und bekam das gleiche jumpy Ergebnis.

die folgende Frage zu Mine auch sehr ähnlich ist, aber noch keine Antwort hat: UITextfield text position not animating while width constraint is animated

Hier mein Projekt auf Github ist: https://github.com/starkindustries/ConstraintAnimationTest

Answer 1

Lösung Demo

I‘ Ich habe eine funktionierende Lösung gefunden. Es fühlt sich ein bisschen hackisch an, aber es funktioniert. Hier ist ein Gif des Endergebnisses. Beachten Sie, dass helloWorldTextField einen blauen Rahmen hat, um seine Position innerhalb des zweiten Textfelds dahinter anzuzeigen.

Anleitung

Machen Sie zwei Textfelder: helloWorldTextField (die von der Frage Original) und borderTextField (ein neues Textfeld). Entfernen Sie helloWorldTextFields Rand und Hintergrundfarbe. Behalten Sie die Rand- und Hintergrundfarbe borderTextField bei. Zentrum helloWorldTextField innerhalb borderTextField. Animiere dann die Breite von borderTextField.

Github Link und Code-

Hier ist das Projekt auf Github: https://github.com/starkindustries/ConstraintAnimationTest

Hier ist der Code innerhalb MyViewController Klasse. Alles andere ist im Storyboard eingerichtet, das auf Github unter dem obigen Link angezeigt werden kann.

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

Anmerkungen und Literaturhinweise

Was zu dieser Lösung führte ich war @ JimmyJames Kommentar: „Du Animieren nur die UITextField Breite, aber der Inhalt innerhalb animiert ist es nicht.“

ich recherchiert, wie Schriftart Änderungen zu animieren und über diese Frage kam: Is there a way to animate changing a UILabel's textAlignment?

In dieser Frage @CSmith erwähnt, dass „Sie die FRAME animieren, nicht die Textalignment“ https://stackoverflow.com/a/19251634/2179970

Die akzeptierte Antwort, dass Frage schlägt vor, ein UILabel in einem anderen Rahmen zu verwenden. https://stackoverflow.com/a/19251735/2179970

Hoffe das hilft jedem anderen, der auf dieses Problem stößt. Wenn jemand einen anderen Weg hat, dies zu lösen, bitte posten Sie einen Kommentar oder eine andere Antwort. Vielen Dank!