Kombinieren von automatischem Layout mit Kernanimation

Question

Ich bin neu in der Kernanimation und ich kämpfe mit einer Sache - wie Auto-Layout mit Core-Animation zu kombinieren. Eigentlich habe ich nur einen Satz in der Dokumentation von Core Animation gefunden, die hier auf Automatisches Layout bezieht, ist es

Denken Sie daran Ansicht Einschränkungen als Teil Ihrer Animation Aktualisieren Wenn Sie mit Constraint-basierten Layout-Regeln zu Um die Position Ihrer Ansichten zu verwalten, müssen Sie alle Einschränkungen entfernen, die bei der Konfiguration dieser Animation eine Animation stören könnten. Einschränkungen wirken sich auf alle Änderungen aus, die Sie an der Position oder Größe einer Ansicht vornehmen. Sie wirken sich auch auf die Beziehungen zwischen der Ansicht und ihren untergeordneten Ansichten aus. Wenn Sie Änderungen an einem dieser Elemente animieren, können Sie die Abhängigkeiten entfernen, die Änderung vornehmen und dann alle neuen Einschränkungen anwenden.

Aber wie ich versucht habe, ist alles nicht so strait-forward wie es scheinen mag. Hier ist mein Szenario.

Ich habe ein gleitendes Menü entworfen, das das automatische Layout ausgiebig verwendet. Hier ist das Aussehen dieser Ansicht.

Ich verwende automatische Layout-Einschränkungen, um die proportionale Positionierung dieser Elemente im gleitenden Menü zu erzwingen. Tatsächlich gibt es dort viele Einschränkungen und ich wollte nicht alle in meiner Frage posten, und vielleicht werden sie auch nicht für die direkte Antwort auf diese Frage benötigt, aber wenn Sie sie brauchen, kann ich den Beitrag mit diesen aktualisieren Einschränkungen.

Die Animation, die Sie im GIF sehen, wurde nur durch automatisches Layout erreicht. Ich habe gerade Auslass der Höhe Einschränkung des Schiebe-Menü hinzugefügt und verändert es auf diese Weise: (der Code geschrieben wird Xamarin Monotouch, aber ich glaube, es sollte klar sein, was für reine iOS-Entwickler hier getan wird)

private void AnimateSlideMenuAppearance() 
    { 
     float height; 
     if (isSlideMenuShown) { 
      height = 0; 
     } else { 
      height = slideMenuHeight; 
     } 
     UIView.Animate (0.4, 
      delegate { 
       this.slideMenuHeightConstraint.Constant = height; 
       this.View.LayoutIfNeeded(); 
      }, 
      delegate { 
       isSlideMenuShown = !isSlideMenuShown; 
      }); 
    } 

Jetzt möchte ich anspruchsvollere Aussehen Übergang erhalten. CLICK HERE um den Effekt zu sehen, den ich erreichen möchte.

Nur zum ausprobieren Ich habe versucht, den verschwindenden Teil dieser Animation mit einer Reihe von CABasicAnimation s zu implementieren, aber es war nicht erfolgreich, ich bekomme seltsames Verhalten.

Kann jemand vorschlagen, was ich hier tun sollte? Ist es möglich, das automatische Layout zu verwenden, um die Positionen der Ansichten zu berechnen, aber die Animation zwischen den Änderungen der automatischen Layoutgröße zu überschreiben? Ich meine in meinem konkreten Beispiel, anstatt die Größen aller Knöpfe im Menü proportional zu verringern, muss ich FadeOut Animation ihnen hinzufügen, die Grenzen auf Null animieren und auch die Anfangszeit der Animationen von Knopf zu Knopf radikal vergrößern, um den Effekt zu bekommen das ich möchte. Oder muss ich das automatische Layout komplett loswerden und die Größen und Animationen manuell berechnen?

Was ist die beste Vorgehensweise in solchen Szenarien - wenn Sie ein komplexes Autolayout verwenden und benutzerdefinierte Kernanimationsübergänge zwischen automatischen Layoutänderungen benötigen? Ich hoffe, dass ich die Frage gut beschrieben habe. Vielen Dank für Ihre Antworten.

Answer 1

Dies ist vollständig durchführbar, während es komplex sein kann, nur weil es so aussieht, als würden Ihre gewünschten Fälle mehrere Animationen haben.

Allerdings habe ich eine Sache in Ihrem Code, die ungerade ist: Sie die Konstante auf der Einschränkung ändern (this.slideMenuHeightConstraint.Constant = height) in die Animation Block statt, bevor es.Für fast alle Fälle kann ich mir vorstellen, dass Sie die Bedingung vor den Animationsblock ändern sollten. Constraints werden nicht visuell dargestellt, bis entweder die nächste UI-Schleife ausgeführt wird (oder setNeedsUpdateConstraints, um sie für die nächste Ausführungsschleife zu erzwingen) oder sofort durch layoutIfNeeded. Und da [UIView animate:...] dies für Sie tut, sollte layoutIfNeeded (allgemein) die nur Sache in Ihrem animierten Block sein, wenn das automatische Layout animieren.

In Ihrem Fall müssen Sie die Animation jedoch etwas reaktiver machen - zum Beispiel, wenn Sie diese Schaltflächen wie im Beispiel hinzufügen möchten und sie hineinspringen, animieren und wachsen lassen. Nachdem Sie layoutIfNeeded aufgerufen haben, können Sie die Rahmengröße sicher überprüfen. Wenn der Schwellenwert überschritten ist (oder eine andere Metrik), können Sie die Animationen der Schaltflächen auslösen. (Ja, das könnte ein Fall sein, in dem ich mehr Code innerhalb des animierten Blocks hinzufügen würde - überprüfe den Schwellenwert, beginne eine andere Animation usw.).