Position und anchorPoint bei einer UIView Frame Animation.

Früher oder später benötigt ein iOS-Entwickler eigene Animationen zwischen den Ansichten.

Dabei handelt es sich oft um eine Mischung aus Positionsänderungen und der Skalierung des Frames einer Ansicht auf die Animation einer anderen Ansicht. Sie könnten so etwas wie das versuchen:

Manchmal funktioniert das, aber nicht, wenn myView Unteransichten hat. Wenn myView beispielsweise ein Label enthält, ändert sich der Frame der Überwachungsansicht, aber das Label bleibt so, wie es ist. Stattdessen brauchen wir das Etikett, um es zusammen mit dem Superview zu skalieren. Wir könnten die Frame Animation auf den Frame des Labels anwenden, aber während dies die Größe des Labels ändert, wird die Schrift nicht skaliert. Wir brauchen einen besseren Ansatz. Wir zeigen ihnen, wie Sie die Transformationseigenschaften der Ansicht und die Position der Ebene verwenden, um das Ziel zu erreichen.

Position und ancherPoint.

In iOS hat jede UIView eine Ebene mit zwei interessanten Eigenschaften: anchorPoint und position. Diese beiden Eigenschaften sind miteinander verbunden und das Ändern eines anchorPoints oder die Position der Ebene ändert ihre Platzierung in der übergeordneten Ansicht.

Die Eigenschaft position definiert die Position des anchorPoints im Superview, so dass das Ändern des anchorPoints oder der Position die Platzierung der untergeordneten View in der Container-Übersicht beeinflusst. Der Positionswert stellt Punkte auf dem Bildschirm dar, so dass das Setzen von x = 1 die Ansicht um einen Punkt nach rechts verschiebt. Der anchorPoint-Wert ist anders. Bei anchorPoint wird bei der Einstellung x = 1 der anchorPoint am rechten Rand der Ansicht gesetzt, bei x = 0 am linken Rand.

Kommen wir zu den Animationen.

Lassen Sie uns das alles mit ein paar Animationen verdeutlichen. Beginnen Sie mit einer Ansicht und einer Unteransicht:

Lassen wir initial Square seinen Frame animieren von

zu

Lassen Sie uns dies aufschlüsseln und mit der Position beginnen, so dass das smallSquare in der Mitte des Containers endet.

Ok, das war einfach. Lassen Sie uns nun das smallSquare auf die doppelte Größe skalieren, während es sich in die Mitte bewegt.

Auf dieser Grundlage können wir nun eine neue Funktion erstellen, welche die Ansicht von ihrem ursprünglichen Frame auf einen neues verschiebt.

Jetzt können wir unsere oberen Transitions als

definieren.

Nun zum anchorPoint.

Wir haben angenommen, dass der anchorPoint immer auf x:0.5 und y gesetzt ist: 0.5. Dies ist die Standardposition, aber jemand könnte den anchorPoint an eine andere Position verschoben haben und wir müssen dies berücksichtigen. Wir müssen unsere Funktion ändern von

zu

Unabhängig von der Position des anchorPoints werden die Ansichten nun korrekt verschoben und skaliert. Zum Zwecke der Skalierung und Positionsänderung benötigen wir den anchorPoint einer Ebene nicht zu verschieben, wir können uns einfach auf layer.position verlassen und transformieren, um den Effekt der Animation zu erzielen, der von jedem beliebigen Punkt in der Ansicht ausgeht.

Zusammenfassung.

Die Methode, die entwickelt wurde, kann ihre Arbeit ein wenig einfacher und nervenschonender machen. Nachfolgend finden Sie die vollständige Funktion als Erweiterung von UIView:

Vielen Dank für ihren Besuch.