Comment retourner une UIView autour de l'axe x, tandis que simultanément la commutation des sous-vues

Cette question a été posée avant, mais de manière un peu différente et je n'ai pas pu obtenir toutes les réponses à travailler comme je le voulais, donc j'espère que quelqu'un avec un grand Cœur de l'Animation de compétences peut m'aider.

J'ai un jeu de cartes sur une table. En tant que l'utilisateur glisse le doigt vers le haut ou vers le bas l'ensemble des cartes de déplacer vers le haut et vers le bas de la table. Il y a 4 cartes visibles sur l'écran à un moment donné, mais seulement la deuxième carte montre son visage. En tant que l'utilisateur effectue la deuxième carte bascule en arrière sur son visage et la prochaine carte (selon le sens de balayage) des terres en place en montrant son visage.

J'ai mis en place ma carte de vue de la classe comme ceci:

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

Et j'ai essayé de retourner la carte à l'aide de ce morceau de 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];

}

Ce code fonctionne, mais il a d'autres problèmes que je n'arrive pas à comprendre:

Seulement la moitié de la carte au niveau de l'axe des x est animé.
Une fois retournée, la face de la carte est à l'envers et en miroir.
Une fois que j'ai retourné la carte je ne peux pas obtenir de l'animation à jamais couru de nouveau. En d'autres termes, je peux exécuter le bloc d'animation autant de fois que je veux, mais seulement la première fois à animer. Les fois suivantes j'essaie d'animer simplement mener à un fondu entrant et sortant entre les sous-vues.

Aussi, gardez à l'esprit que j'ai besoin d'être capable d'interagir avec la surface de la carte. c'est à dire qu'il a des boutons sur elle.

Si quelqu'un a été confronté à ces questions, il serait bien de voir vos solutions. Encore mieux serait d'ajouter une perspective de transformation de l'animation pour donner un peu plus de réalisme.

OriginalL'auteur Michael Gaylord | 2012-03-11

12

Ce qui s'est avéré être plus simple que je pensais, et je n'ai pas eu à l'utiliser tout CoreAnimation bibliothèques pour obtenir l'effet. Grâce à @Aaron Hayman pour l'indice. J'ai utilisé transitionWithView:duration:options:animations:completion

Ma mise en œuvre à l'intérieur du conteneur affichage:
```
    [UIView transitionWithView:self 
                      duration:0.2 
                       options:UIViewAnimationOptionTransitionFlipFromBottom
                    animations: ^{
                            [self.backView removeFromSuperview];
                            [self addSubview:self.frontView];
                    }
                    completion:NULL];
```
Le truc, c'était le UIViewAnimationOptionTransitionFlipFromBottom option. D'ailleurs, Apple a exacte de ce bout de code dans leur documentation. Vous pouvez également ajouter d'autres animations pour le bloc comme le redimensionnement et le déplacement.

OriginalL'auteur Michael Gaylord
3

Ok, ce ne sera pas une solution complète, mais je vais souligner certaines choses qui pourraient être utiles. Je ne suis pas un Core-Animation gourou, mais j'ai fait un peu de rotations 3D dans mon programme.

Tout d'abord, il n'y a pas de "retour" à une vue. Donc, si vous faites pivoter quelque chose par M_PI (180 degrés), vous allez être à la recherche à ce point de vue, comme si à partir de l'arrière (ce qui est pourquoi il est à l'envers/miroir).

Je ne suis pas sûr de ce que tu veux dire par:

Seulement la moitié de la carte au niveau de l'axe des x est animé.

Mais, il peut être utile de tenir compte de votre point d'ancrage (le point auquel la rotation se produit). C'est généralement dans le centre, mais souvent vous avez besoin qu'il soit autrement. Notez que les points d'ancrage sont exprimées en pourcentage (%/100)...donc les valeurs sont 0 - 1.0 f. Vous devez n'avoir qu'une fois (sauf si vous en avez besoin pour changer). Voici comment accéder au point d'ancrage:

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

La raison que l'animation ne jamais s'exécute une fois c'est parce que des transformations sont absolus, et non cumulatif. Considérez que vous êtes toujours en commençant par l'identité de transformer et puis de modifier ça, et il va donner un sens...mais en gros, pas d'animation se produit car il n'y a rien à animer la deuxième fois (la vue est déjà dans l'état que vous demandez à être dans).

Si vous êtes à l'animation d'une vue à l'autre (et vous ne pouvez pas utiliser [UIView transitionWithView:duration:options:animations:completion:];) vous l avez à utiliser une à deux étapes de l'animation. Dans la première étape de l'animation, de la "carte de" qui est retournée à l'arrière, vous pourrez faire pivoter la vue à disparaître "up/down/whatever" pour M_PI_2 (à quel point il sera "gone", ou pas visible, à cause de la rotation). Et dans la deuxième étape, vous êtes tourner le dos-de-vue-pour-disparaître à 0 (ce qui devrait être l'identité transformer...aka, le point de vue de l'état normal). En outre, vous aurez à faire l'exact opposé de la "carte de" qui apparaît (à face). Vous pouvez le faire en mettant en œuvre une autre [UIView animateWithDuration:...] à la fin du premier bloc. Je vous préviens cependant, cela peut être un peu compliqué. Surtout depuis que vous êtes désireux de vues avoir un 'dos', qui, fondamentalement, exigent l'animation de 4 points de vue (la vue à disparaître, la vue à apparaître, haut-de-vue-pour-disparaissent, et l'arrière-de-vue-à paraître). Enfin, à la fin du bloc de la deuxième animation, vous pouvez faire un peu de nettoyage (réinitialiser la vue qui sont en rotation et de faire leur alpha 0.0 f, etc...).

Je sais que c'est compliqué, de sorte que vous pouvez lire un tutoriel sur Core Animation.

Merci Aaron. Le transitionWithView méthode m'a donné une idée de la solution. Cela étant dit, vous ne me donner une meilleure compréhension de la façon d'animations 3D. Le temps pour moi d'investir dans un bon Core Animation du livre.

OriginalL'auteur Aaron Hayman
1

@Aaron a quelques bonnes infos que vous devez lire.

La solution la plus simple est d'utiliser un CATransformLayer qui vous permettra de placer les autres CALayer's à l'intérieur et à maintenir leur 3D hiérarchie.

Par exemple pour créer une "Carte de" qui a un avant et à l'arrière, vous pourriez faire quelque chose comme ceci:
```
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];
```
Avec cela, vous pouvez maintenant appliquer votre transformer cardContainer et avoir un retournement de la carte.

Bien que cette méthode fonctionne. J'ai besoin d'avoir UIViews avec des éléments interactifs sur les cartes que l'utilisateur doit interagir avec la carte de visages. À l'aide de CALayer seule me permet de travailler avec les images etc.
Place cette hiérarchie dans un contenant UIView qui traite des interactions...
Aha. A noté. Semble que cela devrait fonctionner. Je vous remercie.

OriginalL'auteur Paul.s
0

@Paul.s

J'ai suivi votre approche avec carte contenant, mais quand je applt la rotation de l'animation sur la carte contenant seulement la moitié de la première carte tourne autour de lui-même et enfin, le point de vue s'affiche.Chaque fois qu'une partie est manquante dans l'animation

OriginalL'auteur Ilker Baltaci

Basé sur Paul.s c'est mis à jour pour Swift 3 et permet de basculer d'une carte en diagonale:

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

Animer une 360 mais depuis les couches ont différentes zPositions les différentes "parties" de l'couches de montrer

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

OriginalL'auteur aBikis

Vous devez vous connecter pour publier un commentaire.