Wie wird eine UIView um die x-Achse gedreht, während gleichzeitig Subviews gewechselt werden?

8

Diese Frage wurde schon vorher gestellt, aber auf eine etwas andere Art und Weise und ich konnte keine der Antworten so bekommen, wie ich es wollte, also hoffe ich, dass jemand mit großartigen Kernanimationsfähigkeiten mir helfen kann.

>

Ich habe Karten auf einem Tisch. Während der Benutzer den Kartensatz nach oben oder unten wischt, bewegt er sich auf dem Tisch auf und ab. Zu jedem Zeitpunkt sind 4 Karten auf dem Bildschirm sichtbar, aber nur die zweite Karte zeigt ihr Gesicht. Wenn der Benutzer wischt, wird die zweite Karte auf das Gesicht zurückgeschlagen und die nächste Karte (abhängig von der Wischrichtung) landet an ihrem Platz und zeigt ihr Gesicht.

Ich habe meine Kartenansichtsklasse wie folgt eingerichtet:

%Vor%

Und ich habe versucht, die Karte mit diesem Code zu spiegeln:

%Vor%

Dieser Code funktioniert, aber es hat die folgenden Probleme, die ich anscheinend nicht herausfinden kann:

  1. Nur die Hälfte der Karte auf der X-Achse ist animiert.
  2. Einmal umgedreht, ist das Gesicht der Karte umgedreht und gespiegelt.
  3. Sobald ich die Karte umgedreht habe, kann ich die Animation nie wieder ausführen. Mit anderen Worten, ich kann den Animationsblock so oft ausführen, wie ich möchte, aber nur das erste Mal wird animiert. Die folgenden Male, die ich versuche zu animieren, führen nur zu einem Ein- und Ausblenden zwischen den Untersichten.

Denken Sie auch daran, dass ich in der Lage sein muss, mit dem Gesicht der Karte zu interagieren. h. es hat Knöpfe darauf.

Wenn jemand auf diese Probleme gestoßen ist, wäre es schön, Ihre Lösungen zu sehen. Noch besser wäre es, der Animation eine perspektivische Transformation hinzuzufügen, um ihr ein bisschen mehr Realismus zu verleihen.

    
Michael Gaylord 11.03.2012, 15:05
quelle

5 Antworten

11

Dies erwies sich als viel einfacher als ich dachte und ich musste keine CoreAnimation-Bibliotheken verwenden, um den Effekt zu erzielen. Danke an @Aaron Hayman für den Hinweis. Ich habe transitionWithView:duration:options:animations:completion

benutzt

Meine Implementierung in der Containeransicht:

%Vor%

Der Trick war die Option UIViewAnimationOptionTransitionFlipFromBottom . Übrigens, Apple hat genau dieses Stück Code in seiner Dokumentation. Sie können dem Block auch andere Animationen hinzufügen, wie Größenanpassung und Verschieben.

    
Michael Gaylord 12.03.2012, 09:48
quelle
2

Ok, das wird keine vollständige Lösung sein, aber ich werde auf einige Dinge hinweisen, die hilfreich sein könnten. Ich bin kein Core-Animation-Guru, aber ich habe ein paar 3D-Drehungen in meinem Programm gemacht.

Erstens gibt es kein Zurück zu einer Ansicht. Wenn Sie also etwas um M_PI drehen (180 Grad), werden Sie diese Ansicht wie von hinten betrachten (deshalb ist es auf dem Kopf / gespiegelt).

Ich bin mir nicht sicher, was Sie meinen:

  

Nur die Hälfte der Karte auf der X-Achse ist animiert.

Aber es könnte helfen, Ihren Ankerpunkt (den Punkt, an dem die Rotation auftritt) zu betrachten. Es ist normalerweise in der Mitte, aber oft muss es anders sein. Beachten Sie, dass die Ankerpunkte als Verhältnis (in Prozent / 100) ausgedrückt werden ... also sind die Werte 0 - 1,0f. Sie müssen es nur einmal einstellen (es sei denn, Sie müssen es ändern). So greifen Sie auf den Ankerpunkt zu:

layer.anchorPoint = CGPointMake(0.5f, 0.5f) //This is center

Der Grund, warum die Animation nur einmal ausgeführt wird, ist, dass Transformationen absolut und nicht kumulativ sind. Berücksichtigen Sie, dass Sie immer mit der Identitätstransformation beginnen und diese dann ändern, und es wird Sinn ergeben ... aber im Grunde gibt es keine Animation, da beim zweiten Mal nichts zu animieren ist (die Ansicht ist bereits in dem Zustand, in dem Sie sich befinden) um es zu bitten).

Wenn Sie von einer Ansicht in eine andere animieren (und Sie können [UIView transitionWithView:duration:options:animations:completion:]; nicht verwenden), müssen Sie eine zweistufige Animation verwenden. In der ersten Phase der Animation, für die "Karte", die nach hinten gedreht wird, drehen Sie die Ansicht "verschwinden" auf "hoch / runter / was auch immer" auf M_PI_2 (an diesem Punkt wird es "weg" sein), oder nicht sichtbar, wegen seiner Rotation). Und in der zweiten Stufe drehen Sie die zu entfernende Rückseite auf 0 (was die Identitätstransformation sein soll ... aka, der Normalzustand der Ansicht). Außerdem müssen Sie genau das Gegenteil für die "Karte" tun, die erscheint (auf der Vorderseite). Sie können dies tun, indem Sie im Completion-Block des ersten einen weiteren [UIView animateWithDuration:...] implementieren. Ich warne dich aber, das kann ein bisschen kompliziert werden. Vor allem, weil Sie möchten, dass Ansichten eine "Rückseite" haben, die im Wesentlichen 4 Ansichten animieren muss (die Ansicht zum Verschwinden, die Ansicht zum Erscheinen, die Rückseite zum Verschwinden und die Rückseite zum of-view-to-erscheinen). Schließlich können Sie im Completion-Block der zweiten Animation einige Aufräumarbeiten durchführen (die Ansicht zurücksetzen, die gedreht werden und ihr Alpha 0.0f, etc ... machen).

Ich weiß, dass das kompliziert ist, deshalb sollten Sie vielleicht ein Tutorial über Core-Animation lesen.

    
Aaron Hayman 11.03.2012 15:39
quelle
1

@Aaron hat einige gute Informationen, die Sie lesen sollten.

Die einfachste Lösung ist die Verwendung eines CATransformLayers damit können Sie andere CALayers hineinlegen und pflegen ihre 3D-Hierarchie.

Um zum Beispiel eine "Karte" mit Vorder- und Rückseite zu erstellen, könnten Sie so etwas machen:

%Vor%

Damit können Sie nun Ihre Transformation auf cardContainer anwenden und eine Flip-Karte haben.

    
Paul.s 11.03.2012 20:18
quelle
0

@ Paul.s

Ich folgte Ihrem Ansatz mit dem Kartencontainer, aber wenn ich die Rotationsanimation auf dem Kartencontainer anwende, dreht sich nur die eine Hälfte der ersten Karte um sich selbst und schließlich erscheint die ganze Ansicht. Jedes Mal fehlt eine Seite in der Animation

    
Ilker Baltaci 23.05.2012 20:04
quelle
0

Basierend auf Paul.s wird dies für Swift 3 aktualisiert und eine Karte diagonal umgedreht:

%Vor%

Animiert ganze 360, aber da die Ebenen unterschiedliche zPositions haben, werden die verschiedenen 'Seiten' der Ebenen

angezeigt %Vor%     
aBikis 08.06.2017 20:54
quelle