Wie flip ein UIView um die x-Achse, während gleichzeitig die Umschaltung Untersichten

Diese Frage wurde gebeten vor, aber in einer etwas anderen Weise, und ich war nicht in der Lage zu bekommen, eine der Antworten zu arbeiten, wie ich wollte, so bin ich der Hoffnung, jemand mit großer Core Animation Fähigkeiten, die mir helfen können.

Habe ich eine Reihe von Karten auf einem Tisch. Wie der Benutzer Eingaben nach oben oder unten der Satz der Karten nach oben und unten die Tabelle. Es gibt 4 Karten sichtbar auf dem Bildschirm zu einem bestimmten Zeitpunkt, sondern nur die zweite Karte zeigt sein Gesicht. Wie der user klaut die zweite Karte kehrt zurück auf sein Gesicht und die nächste Karte (je nach swipe-Richtung) landet an seiner Stelle zeigen Ihr Gesicht.

Habe ich meine Karte Klasse Ansicht wie diese:

@interface WLCard : UIView {
    UIView *_frontView;
    UIView *_backView;
    BOOL flipped;
}

Und ich habe versucht, kippen Sie die Karte mithilfe dieses Stück code:

- (void) flipCard {
    [self.flipTimer invalidate];
    if (flipped){
        return;
    }

    id animationsBlock = ^{
            self.backView.alpha = 1.0f;
            self.frontView.alpha = 0.0f;
            [self bringSubviewToFront:self.frontView];
            flipped = YES;

            CALayer *layer = self.layer;
            CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
            rotationAndPerspectiveTransform.m34 = 1.0 / 500;
            rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI, 1.0f, 0.0f, 0.0f);
            layer.transform = rotationAndPerspectiveTransform;
    };
    [UIView animateWithDuration:0.25
                          delay:0.0
                        options: UIViewAnimationCurveEaseInOut
                     animations:animationsBlock
                     completion:nil];

}

Dieser code funktioniert, hat aber folgende Probleme mit ihm, dass ich kann nicht scheinen, um herauszufinden,:

Nur die Hälfte der Karte über der x-Achse animiert werden.
Einmal umgedreht, mit dem Gesicht der Karte ist auf den Kopf gestellt und gespiegelt werden.
Einmal habe ich legte die Karte, die ich nicht bekommen kann, dass die animation immer wieder. In anderen Worten, ich kann die animation block so oft wie ich will, aber nur das erste mal animiert. Die nachfolgenden Zeiten, die ich versuche zu animieren, führen, um nur ein fade-in und-out zwischen den Untersichten.

Auch Bedenken, dass ich in der Lage sein müssen, um die Interaktion mit der Vorderseite der Karte. das heißt, es hat Tasten auf Sie.

Wenn das jemand hat, führen Sie in diese Themen wäre es toll zu sehen, wie Ihre Lösungen. Noch besser wäre, eine perspektivische Transformation, um die animation zu geben, dass zusätzliche wenig Realismus.

InformationsquelleAutor Michael Gaylord | 2012-03-11

12

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

Meine Implementierung innerhalb des Containers anzeigen:
```
    [UIView transitionWithView:self 
                      duration:0.2 
                       options:UIViewAnimationOptionTransitionFlipFromBottom
                    animations: ^{
                            [self.backView removeFromSuperview];
                            [self addSubview:self.frontView];
                    }
                    completion:NULL];
```
Der trick war die UIViewAnimationOptionTransitionFlipFromBottom option. Übrigens, Apple hat genau dieses Stück code in Ihre Dokumentation. Sie können auch andere Animationen auf den block wie Größenänderung und verschieben.

InformationsquelleAutor Michael Gaylord
3

Ok, dies ist nicht eine komplette Lösung, aber ich werde darauf hinweisen, ein paar Dinge, die hilfreich sein könnten. Ich bin kein Core-Animation-guru, aber ich habe ein paar 3D-Rotationen in meinem Programm.

Erstens, es gibt keine 'zurück', um eine Ansicht. Also, wenn Sie drehen etwas durch M_PI (180 Grad) gehst du zu betrachten, die Ansicht, als ob aus dem Rücken (das ist, warum es upside down/gespiegelt).

Ich bin mir nicht sicher, was du damit meinst:

Nur die Hälfte der Karte über der x-Achse animiert.

Aber, es könnte helfen zu überlegen, Ihren Ankerpunkt (der Punkt, an dem die rotation stattfindet). Es ist in der Regel in der Mitte, aber oft braucht man es nicht anders sein. Beachten Sie, dass die Anker-Punkte ausgedrückt als Anteil (Prozentsatz /100)...also die Werte sind von 0 - 1.0 f. Sie brauchen nur, um es einmal (es sei denn, Sie brauchen, es zu ändern). Hier ist, wie Sie Zugriff auf den Ankerpunkt:

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

Der Grund, warum die animation immer nur einmal ausgeführt wird, da verwandelt sind absolute, nicht kumulativ. Bedenken Sie, dass Sie immer beginnend mit der Identität zu transformieren und dann zu modifizieren, dass es Sinn machen werde...aber im Grunde genommen, keine animation stattfindet, da gibt es nichts zu animieren, das zweite mal (die Ansicht ist bereits in dem Zustand, Sie sind forderte Sie auf, in).

Wenn Sie das animieren von einer Ansicht zu einer anderen (und Sie nicht verwenden können [UIView transitionWithView:duration:options:animations:completion:];) you ' L müssen Sie einen zwei-Stufen-animation. In der ersten Phase der animation, für die "Karte" wird umgedreht auf die Rückseite, werden Sie die Ansicht drehen-zu-verschwinden 'up/down/was auch immer" zu M_PI_2 (an welchem Punkt wird es sein, 'Weg', oder nicht sichtbar, weil es die rotation). Und in der zweiten Stufe, sind Sie drehen Sie die Rückseite mit einer Ansicht-zu-verschwinden, um 0 (die sollte die Einheitsmatrix...aka, die Ansicht normal-Zustand). Darüber hinaus werden Sie zu tun haben, das genaue Gegenteil für die "Karte", das erscheint (auf Vorderseite). Sie können dies tun, durch die Implementierung von anderen [UIView animateWithDuration:...] im Abschluss-block der erste. Ich werde Sie warnen aber, dies zu tun, kann ein bisschen kompliziert. Vor allem, da Sie wollen, sind Ansichten, um eine 'Rückseite', die im Grunde erfordern animieren 4 Ansichten (Ansicht-zu-verschwinden, der Ansicht zu erscheinen, Hintern-der-Blick-zu-verschwinden, und die-Rückseite-der-Blick-zu-erscheinen). Schließlich, in der Abschluss-block der zweiten animation, die Sie tun können, etwas Aufräumen (reset der Ansicht, die gedreht sind, und stellen Ihre alpha 0.0 f, etc...).

Ich weiß, das ist kompliziert, so möchten Sie vielleicht Lesen Sie einige Tutorials auf Core-Animation.
- Dank Aaron. Die transitionWithView Methode hat mir einen Hinweis auf die Lösung. , Die being said, Sie gab mir ein besseres Verständnis, wie 3D-Animationen. Zeit für mich, zu investieren in eine gute Core Animation buchen.
InformationsquelleAutor Aaron Hayman
1

@Aaron hat einige gute Informationen, die man Lesen sollte.

Die einfachste Lösung ist die Verwendung eines CATransformLayer, dass Sie die anderen CALayer's innen und pflegen Sie Ihre 3D-Hierarchie.

Zum Beispiel zum erstellen einer "Karte", hat eine Vorder-und Rückseite könnte man etwas wie das hier tun:
```
CATransformLayer *cardContainer = [CATransformLayer layer];
cardContainer.frame = //some frame;

CALayer *cardFront  = [CALayer layer];
cardFront.frame     = cardContainer.bounds;
cardFront.zPosition = 2;   //Higher than the zPosition of the back of the card
cardFront.contents  = (id)[UIImage imageNamed:@"cardFront"].CGImage;
[cardContainer addSublayer:cardFront];

CALayer *cardBack  = [CALayer layer];
cardBack.frame     = cardContainer.bounds;
cardBack.zPosition = 1;
cardBack.contents  = (id)[UIImage imageNamed:@"cardBack"].CGImage; //You may need to mirror this image
[cardContainer addSublayer:cardBack];
```
Mit diesem können Sie nun anwenden, Ihre Transformation zu cardContainer und haben eine flipping card.
- Während diese Methode funktioniert. Ich muss UIViews mit interaktiven Elementen auf den Karten muss der Benutzer die Interaktion mit der Karte Gesichter. Verwendung von CALayer ist nur erlaubt mir die Arbeit mit den Bildern usw.
- Legen Sie diese Hierarchie in eine mit UIView, die sich mit Interaktionen...
- Aha. Notiert. Wie das aussieht, der sollte funktionieren. Danke.
InformationsquelleAutor Paul.s
0

@Paul.s

Folgte ich Ihren Ansatz mit dem Karte-container, aber wenn ich applt die rotation-animation auf der Karte-container nur eine Hälfte der ersten Karte dreht sich um sich selbst und schließlich die ganze Ansicht wird angezeigt.Jedes mal, wenn eine Seite fehlt, die in der animation

InformationsquelleAutor Ilker Baltaci

Basierend auf Paul.s dies ist aktualisiert für Swift 3 und flip die Karte Diagonal:

func createLayers(){
  transformationLayer = CATransformLayer(layer: CALayer())
  transformationLayer.frame = CGRect(x: 15, y: 100, width: view.frame.width - 30, height: view.frame.width - 30)

  let black = CALayer()
  black.zPosition = 2
  black.frame = transformationLayer.bounds
  black.backgroundColor = UIColor.black.cgColor

  transformationLayer.addSublayer(black)

  let blue = CALayer()
  blue.frame = transformationLayer.bounds
  blue.zPosition = 1
  blue.backgroundColor = UIColor.blue.cgColor

  transformationLayer.addSublayer(blue)

  let tgr = UITapGestureRecognizer(target: self, action: #selector(recTap))
  view.addGestureRecognizer(tgr)
  view.layer.addSublayer(transformationLayer)
}

Animieren, eine volle 360-aber da die Schichten haben unterschiedliche zPositions die verschiedenen "Seiten" der Schichten zeigen

func recTap(){
    let animation = CABasicAnimation(keyPath: "transform")
    animation.delegate = self
    animation.duration = 2.0
    animation.fillMode = kCAFillModeForwards
    animation.isRemovedOnCompletion = false
    animation.toValue = NSValue(caTransform3D: CATransform3DMakeRotation(CGFloat(Float.pi), 1, -1, 0))
    transformationLayer.add(animation, forKey: "arbitrarykey")
  }

InformationsquelleAutor aBikis

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.