l'effet de pliage/dépliage du papier dans twitter pour iPad

Question

Twitter pour l'iPad met en œuvre un effet de "pincement pour étendre le pliage du papier". Un court clip vidéo ici. http://www.youtube.com/watch?v=B0TuPsNJ-XY

Cela peut-il être fait avec CATransform3D sans OpenGL ? Un exemple concret serait le bienvenu.

Mise à jour : J'étais intéressé par l'approche ou la mise en œuvre de cet effet d'animation. C'est pourquoi j'ai offert une prime pour cette question - srikar

Answer 1

Voici un exemple très simple utilisant une reconnaissance de gestes et CATransform3D pour vous aider à démarrer. Il suffit de pincer pour faire pivoter la vue grise.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...

    CGRect rect = self.window.bounds;
    view = [[UIView alloc] initWithFrame:CGRectMake(rect.size.width/4, rect.size.height/4,
                                                         rect.size.width/2, rect.size.height/2)];
    view.backgroundColor = [UIColor lightGrayColor];
    [self.window addSubview:view];

    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1/500.0; // this allows perspective
    self.window.layer.sublayerTransform = transform;

    UIPinchGestureRecognizer *rec = [[UIPinchGestureRecognizer alloc] initWithTarget:self
                                                                              action:@selector(pinch:)];
    [self.window addGestureRecognizer:rec];
    [rec release];

    return YES;
}

- (void)pinch:(UIPinchGestureRecognizer *)rec
{
    CATransform3D t = CATransform3DIdentity;
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0);
    t = CATransform3DRotate(t, rec.scale * M_PI, 1, 0, 0);
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0);
    self.view.layer.transform = t;
}

Answer 2

Cet effet se compose essentiellement de plusieurs étapes différentes :

1. Reconnaissance des gestes pour détecter le moment où un pincement se produit.
2. Lorsque le geste commence, Twitter est susceptible de créer une contexte graphique pour la partie supérieure et inférieure, créant essentiellement des images à partir de leurs couches.*
3. Attachez les images comme sous-vues en haut et en bas.
4. Lorsque les doigts se plient et se déplient, utilisez une CATransform3D à ajouter une perspective aux images.
5. Une fois que la vue s'est "étirée" complètement, rendez visibles les vraies vues secondaires et supprimez les images graphiques créées par le contexte.

Pour réduire les vues, faites l'inverse de ce qui précède.

*Comme ces vues sont relativement simples, il n'est pas nécessaire de les rendre dans un contexte graphique.

Answer 3

L'effet est essentiellement une vue qui tourne autour de l'axe X : lorsque vous faites glisser un tweet hors de la liste, il y a une vue qui commence parallèlement au plan X-Z. Lorsque l'utilisateur retire un tweet de la liste, la vue tourne autour de l'axe X jusqu'à ce qu'elle soit complètement dans le plan X-Y. Le site documentation dit :

La structure de données CATransform3D définit une transformation tridimensionnelle homogène homogène tridimensionnelle (une matrice 4 par 4 de valeurs CGFloat ) qui est utilisée pour faire pivoter, mettre à l'échelle, décalage, inclinaison, et appliquer une perspective à une couche.

De plus, nous savons que le CALayer transform est une structure CATransform3D, et qu'elle est également animable. Par conséquent, je pense que l'on peut affirmer que l'effet de pliage en question est réalisable avec Core Animation.